Web Components & Slots

Type into a slotted light-DOM input inside an open shadow root, then reach the shadow button via ::part

What you will learn

Query slotted light-DOM content projected through an open shadow root without piercing the shadow boundary
Distinguish shadow-DOM internals (reachable only via ::part) from slotted light DOM (directly queryable)
Handle client-side custom-element upgrade timing in an automation script

Web Components & Slots

Type into a slotted light-DOM input inside a custom element with an open shadow root, then submit to mirror the value out

<wc-card> and <wc-field> are custom elements with open shadow roots that render only a styled wrapper plus a <slot>.

The #wc-input is slotted light DOM — it lives in the host document, so it is directly queryable without piercing any shadow boundary.

Slotted Input

Fill #wc-input, then click #wc-submit

No submission yet

Testing Tips

Automation hints

✓ Slotted content lives in the host's light DOM — #wc-input is queryable directly, no shadowRoot piercing needed
✓ Fill #wc-input, click #wc-submit, then assert #wc-result[data-submitted="hello"] — the value is mirrored to that attribute
✓ The shadow-only button is exposed via ::part — reach it with wc-field::part(action) or a pierce locator like page.locator("wc-field").locator("button")
✓ The custom elements are registered with customElements.define client-side only — add a short wait after navigation so upgrade completes before you interact

Related Challenges

Web Components & Slots

Type into a slotted light-DOM input inside an open shadow root, then reach the shadow button via ::part

What you will learn

Query slotted light-DOM content projected through an open shadow root without piercing the shadow boundary
Distinguish shadow-DOM internals (reachable only via ::part) from slotted light DOM (directly queryable)
Handle client-side custom-element upgrade timing in an automation script

Web Components & Slots

Type into a slotted light-DOM input inside a custom element with an open shadow root, then submit to mirror the value out

<wc-card> and <wc-field> are custom elements with open shadow roots that render only a styled wrapper plus a <slot>.

The #wc-input is slotted light DOM — it lives in the host document, so it is directly queryable without piercing any shadow boundary.

Slotted Input

Fill #wc-input, then click #wc-submit

No submission yet

Testing Tips

Automation hints

✓ Slotted content lives in the host's light DOM — #wc-input is queryable directly, no shadowRoot piercing needed
✓ Fill #wc-input, click #wc-submit, then assert #wc-result[data-submitted="hello"] — the value is mirrored to that attribute
✓ The shadow-only button is exposed via ::part — reach it with wc-field::part(action) or a pierce locator like page.locator("wc-field").locator("button")
✓ The custom elements are registered with customElements.define client-side only — add a short wait after navigation so upgrade completes before you interact

Related Challenges

iFrames

Hard

Shadow DOM

Hard

Drag & Drop

Hard

Web Components & Slots

What you will learn

Web Components & Slots

Slotted Input

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop

Web Components & Slots

What you will learn

Web Components & Slots

Slotted Input

Testing Tips

Timer

Need Help?

Related Challenges

iFrames

Shadow DOM

Drag & Drop