Web Components in Action

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 ...