::part() and ::slotted() Demo

Shadow Tree Diagram

my-card ├── #shadow-root (open) │ ├── <div class="frame" part="frame"> │ │ ├── <h3 part="title">Shadow DOM title</h3> │ │ ├── <img> │ │ ├── <slot name="subtitle">fallback</slot> │ │ └── <slot name="details">fallback</slot> │ └── Light DOM children (slotted) ├── <span slot="subtitle">Styled by ::slotted()</span> └── <p slot="details">Styled by ::slotted()</p>

Component Definition

This component demonstrates:

Shadow DOM encapsulation (outside styles cannot reach internal elements)
Slots (light DOM projected into shadow DOM)
Fallback content (new cards use fallback content for undefined values)
::slotted() (styling projected content like subtitles and details)
part="" (exposing internal elements like the frame and title)
::part() (styling those exposed parts from the outer page)

Light DOM Styles

All <h3> elements OUTSIDE the component should look like this:

I am a normal (light-DOM) <h3> styled from the page

Below, we TRY to style the internal <h3> inside <my-card> the same way using my-card h3 { ... } — but Shadow DOM prevents it. The title inside the card stays blue, proving encapsulation.

Example Cards

The sword of the king This sword came from the lady in the lake, and can cut through anything (ignores DR and Hardness) Excalibur

i want you to give me everything

Dakota Ravenwood Hero Character

This card represents a hero. The subtitle and this paragraph are light-DOM content projected into the component and styled by ::slotted().

Bekyar Raider Hostile Raider

This card represents a raider. The subtitle and this paragraph are light-DOM content projected into the component and styled by ::slotted().