Loading challenge...
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-inputis queryable directly, noshadowRootpiercing 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 withwc-field::part(action)or a pierce locator likepage.locator("wc-field").locator("button") - ✓ The custom elements are registered with
customElements.defineclient-side only — add a shortwaitafter navigation so upgrade completes before you interact
