Shadow DOM: insert content

Let's see how to insert content from the host element within the Shadow DOM using slots.

It is possible to define a part of the template into which external HTML content will be "injected". For this, we use the <slot>...</slot> element, as shown below:

<h1 part='heading'>This is a shadowed H1</h1>

<slot name="my-text">My default text</slot>

</p>

</template>

<body>

<span slot="my-text">Injected content using slot elem</span>

</h1>

</body>

Explanations:

Look at line 4, this is the "injection point"'!
And line 10 is the content which will be injected into the template code. So, when the classic template instantiation and its addition to a shadow host node in the page is done, the HTML produced will contain "Injected Content" instead of <slot mname="my-text"></slot>.

See the complete online example at JSBin:

External resources

An MDN article on "Using templates and slots"
Medium articles:
- "Add Flexibility to Web Components With Slots"
- "Creating Web Components — Templates and Slots"

Page updated

Google Sites

Report abuse