[Feature] Native shadow DOM support

Web Components is a growing trend and statistics show it is used more often than major libraries like React. I’ve got no statistics on how often the shadow DOM is used though. In any instance, the shadow DOM is standardized, so I would assume people will expect support out-of-the-box.

The project https://github.com/Georgegriff/query-selector-shadow-dom works perfectly for now.

const { selectorEngine } = require("query-selector-shadow-dom/plugins/playwright");
const playwright = require('playwright');
...
await playwright.selectors.register(selectorEngine, { name: 'shadow' })
...
  await page.goto('chrome://downloads');
  // shadow= allows a css query selector that automatically pierces shadow roots.
  await page.waitForSelector('shadow=#no-downloads span', {timeout: 3000})

https://github.com/mmarkelov/jest-playwright#configuration also supports it nicely.

But seeing as it requires a new selectorEngine, means the nice selector engines like css, xpath and text do not work on the shadow DOM by default.

If Playwright would support adding a penetrateShadowDOM on a browser, browserContext or page, it would be amazing for usability.

[Georgegriff]

Just took a little look at the code changes this look fantastic! After years of trying to say to people tests shouldn’t have to care about shadow Dom boundaries and having to manually pierce shadow Dom is lame, so much so I had to write a library around it, I’m so happy that my library will be redundant in playwright 😄 excited to try it out

[dgozman]

We definitely want to address this usecase, as it is a part of web standards. Our current approach with >> does not work nicely, that’s why I am changing built-in selectors to pierce shadow. We’ll likely introduce some kind of built-in deep css selector, inspired by query-selector-shadow-dom.

cc @Georgegriff