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.
Table of contents
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.
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.