Web Component Slot Demo - Online Shadow DOM Playground

Shadow DOM provides encapsulation for Web Components, isolating styles and markup from the main document. Slots (<slot>) act as placeholders within the shadow DOM that allow light DOM content (content outside the shadow root) to be projected into specific positions. This creates a composition model where the component defines structure (shadow DOM) and the consumer provides content (light DOM).

Named slots use the name attribute (e.g., <slot name="header">) and are targeted by light DOM elements with matching slot attributes (e.g., <div slot="header">). The default slot has no name attribute and catches all light DOM content that doesn't specify a slot attribute. If no default slot exists, unmatched light DOM content is not rendered.

Fallback content is placed directly inside a <slot> element. It displays only when no corresponding light DOM content is projected into that slot. For example: <slot name="footer">Default Footer</slot> will show "Default Footer" unless the user provides a <footer slot="footer">...</footer> element.

Yes, but with limitations. Use the ::slotted() pseudo-element inside shadow DOM styles to target slotted content. For example: ::slotted(span) { color: red; } styles <span> elements projected into slots. However, ::slotted() only affects top-level slotted nodes — nested children cannot be directly styled from the shadow DOM. Light DOM styles from the main document also apply to slotted content.

Nested slots occur when a slotted element is itself a custom element with its own shadow DOM containing slots. The browser resolves slot assignments recursively: outer slots are assigned first, then inner slots within the projected content. This enables powerful composition patterns but requires careful planning of the slot hierarchy.

Shadow DOM (v1) and <slot> are supported in all modern browsers: Chrome 53+, Firefox 63+, Safari 10+, and Edge 79+. Internet Explorer does not support Shadow DOM. For legacy browser support, consider using polyfills like @webcomponents/webcomponentsjs.

Without any <slot> elements, the shadow DOM is fully encapsulated and light DOM content is not displayed. The component renders only its internal shadow DOM structure. This is useful for self-contained components that don't need external content projection, like a fully self-contained chart widget or icon component.