slot element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The slot element represents a placeholder inside a component created using the shadow DOM specification. This element becomes powerful in the development of compound widgets, favoring the reuse of code.

The slot element is thought to be used by programs. Content authors may find little use for this element.

A shadow DOM or shadow tree is a hierachy of elements, same as the hierarchy of any HTML document, that coexists with the document's tree and other trees, but is completely independent from them. Among other things, this characteristic allows trees to have their own classes and IDs that don't interfere with the classes and IDs of other trees.

Examples

The following example shows the definition of a componet that other developers may use to create elements with the same structure. In this case, the component arranges information about users, including an avatar, a nickname and its full name.

<div class="user">
  <div class="avatar">
    <slot name="avatar"></slot>
  </div>
  <slot name="nickname"></slot>
  <slot name="fullname"></slot>
</div>

Form here, a component user may define the custom element like so:

<user-data>
  <img src="sillyduck.jpg" slot="avatar">
  <span slot="nickname">sillyduck</span>
  <span slot="fullname">John Doe</span>
</user-data>

Lastly, the browser distributes the user's data into the component shadow tree during rendering time, obtaining the final code:

<div class="user">
  <div class="avatar">
    <slot name="avatar">
      <img src="sillyduck.jpg" slot="avatar">
    </slot>
  </div>
  <slot name="nickname">
    <span slot="nickname">sillyduck</span>
  </slot>
  <slot name="fullname">
    <span slot="fullname">John Doe</span>
  </slot>
</div>

Note: the previous examples depict briefly the idea behind components and shadow trees. The programatic part of this mechanism has been ommited as it falls outside the scope of the website.

Attributes

Specific attributes

name

A name for the slot. Elements declared to take place in the slot will use this token as content of the slot attribute.

Example

<div class="recipe">
  <div class="ingredients">
    <slot name="ingredients"></slot>
  </div>
  <hr>
  <div class="process">
    <slot name="process"></slot>
  </div>
</div>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.