Article

Shadow DOM Imperatively with Javascript

I'm not in the shadow DOM

Shadow DOM Declaratively with HTML

Using templates and slots

Let's have some different text! This will go into the unnamed slot This will also go into the unnamed slot

A more involved example

slot A placeholder inside a web component that users can fill with their own markup, with the effect of composing different DOM trees together.
name
The name of the slot.
template A mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript.