Please read my first story about Shadow DOM if you are not familiar with Shadow DOM.
Shadow DOM enables local scoping for HTML & CSS.
Light DOM, Shadow DOM vs. Flattened DOM
Let’s explain the terminology
A Light DOM is the set of DOM elements a user of your component writes between the opening and closing tags. This DOM lives outside the component’s shadow DOM. It is the element’s actual children. In this example, the image and cite are the elements of the Light DOM.
<cite>A Nice Kitten!</cite>
<!--Light DOM ends-->
The Shadow DOM is the DOM a component author writes. Shadow DOM is local to the component and defines its scoped CSS, structure and encapsulates your implementation details.
Flattened DOM tree is what you see in the DevTools and what is rendered on the page.
<img src="xxx.svg" slot="icon">
Slots are placeholders inside your component that users can fill with their own markup.
If you create custom components, you want to only provide the necessary markup that goes into a particular component.
Slots are the way we can arrange that markup however we want. Styling based on different cases and group them.
There are two aspects of slots:
- Light DOM Elements : They say which slot they wanna go into.
<!--Light DOM <img> saying it should be put into the "profile-picture" slot-->
<img src="assets/user.svg" slot="profile-picture">
img is supposed to put into the profile-picture slot.
- The Actual Slot : The
<slot>element, residing somewhere in shadow DOM with a name for itself to be found by light DOM.
<!--The <img> from the light DOM gets rendered here!-->
If you don’t provide the slot attribute to the image tag nothing gets rendered.
Light DOM elements only get rendered if they are part of the Shadow DOM and this only happens by putting them in slots.
In this Codepen example you can see how you can use a template and define style within the template and create a new custom component called <my-paragraph> which can have changing text with slots.
I hope this made you less confused than before :)
I found these links to be very helpful:
Shadow DOM concepts
Shadow DOM is a new DOM feature that helps you build components. You can think of shadow DOM as a scoped subtree inside…
Shadow DOM v1: Self-Contained Web Components | Web Fundamentals
Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components