Chapter 8. The Shadow DOM
This chapter covers
- Component and class encapsulation
- How the Shadow DOM protects your component’s DOM
- The open and closed Shadow DOM
- Shadow DOM terminology: shadow root, shadow boundary, and shadow host
- Polyfilling with the Shady DOM
In the last chapter, we peeked briefly at the Shadow DOM to introduce the concept of slots. If you recall, slots are a way of taking templated content and adding placeholder values that can be replaced by your Web Component’s end user. We marked the areas that can accept new HTML content as slots.
While the <template> tag is a standalone concept and available in all modern browsers, the <slot> tag is not. In fact, the <slot> tag is dependent on the Shadow DOM. We’ve covered every core feature of Web Components so far, except for the Shadow DOM.
There’s a reason I’m covering it last, and that’s because I want to show that it’s not entirely necessary to the Web Component story, as awesome as it is. In the past several chapters, we’ve covered Custom Elements, templates, and HTML Imports, as well as non-Web Component-based techniques to back them up, like ES2015 modules and template literals. All these concepts are either available now for all modern browsers or easily polyfilled.