8.6Shadow DOM

Playwright pierces shadow DOM by default — unlike Selenium, where shadow DOM traversal requires JavaScript injection.

// Playwright automatically reaches into shadow DOM
await page.getByRole('button', { name: 'Toggle' }).click();

// For CSS locators, use >> to cross shadow boundaries explicitly
await page.locator('my-component >> .inner-element').click();