Loading challenge...
Shadow DOM
Access shadow DOM elements
Basic Shadow DOM
Interact with elements inside shadow root
Shadow DOM with Form
Form elements encapsulated in shadow DOM
Nested Shadow DOM
Shadow root inside another shadow root
Automation Tips
How to interact with Shadow DOM
Playwright: page.locator('#shadow-host').locator('#shadow-button') — Playwright pierces shadow DOM automatically. The older >> piercing operator still works but is no longer required.
Cypress: Enable shadow-DOM mode per call — cy.get('#shadow-host').shadow().find('#shadow-button'). Or globally via Cypress.config('includeShadowDom', true).
Selenide (Java): $("#shadow-host").shadowRoot().$("#shadow-button").click() — fluent API for nested roots.
WebdriverIO: $('#shadow-host').shadow$('#shadow-button') for single element, shadow$$ for lists.
Common pitfalls
- Closed shadow roots (
mode: 'closed') — no framework can reach into these; the test must talk to the host's public API instead. - Nested shadow roots — chain the selectors (
.shadow().shadow()), don't try to write a single deep selector string. - XPath doesn't cross the shadow boundary in any major tool — prefer CSS selectors everywhere under the root.
- Styles and events behave normally across the boundary, so keyboard-focus, hover and scroll assertions work on shadow elements like any others.
