Extension only API to query across shadow trees

[rniwa]

What problem are you trying to solve?

Certain browser extensions need to query elements across shadow trees in order to implement features such as autofill.

What solutions exist today?

Chrome exposes chrome.dom.openOrClosedShadowRoot. Firefox exposes element.openOrClosedShadowRoot. Safari has collectMatchingElementsInFlatTree defined in window for Safari's autofill implementation.

How would you solve it?

Ideally, we'd come up with an interoperable API for browser extensions that work across browsers.

Anything else?

No response

[oliverdunk]

To add some more context here, we recently had some discussions about this in the WebExtensions Community Group. While we could add an API in the extension namespace (e.g, browser.dom.querySelector) there was alignment across the extension teams from Chrome, Firefox and Safari that we would prefer to put this closer to the web platform.

Based on previous discussions about other capabilities, I could imagine this being a new API or an { includeShadowRoots: true } option on an existing method (e.g, querySelector).

That doesn't mean this has to be exposed to all sites - we could still allow the user agent to prevent anything other than an extension from calling it / setting the new flag.

[rniwa]

That doesn't mean this has to be exposed to all sites - we could still allow the user agent to prevent anything other than an extension from calling it / setting the new flag.

We most certainly need to do that. We don't want to expose this capability to regular scripts.

[xeenon]

Yes, this should only be exposed to isolated worlds of extensions, not the main world for normal page scripts.

[annevk]

Perhaps we could add something like [Exposed=Extensions] to IDL and have a corresponding check available on environment settings objects (when we cannot rely on IDL alone)?

That still leaves the question of what exact API shape we want here, but would at least address the exposure question and present a path for other APIs of similar nature.

(It would definitely increase the scope of what specifications have covered to date, but it's probably reasonable given the focus on interoperable extensions code.)

[rniwa]

So in terms of the actual API shape, I'm thinking that we want some kind of a way to query across shadow boundaries because iterating over each element and checking the existence of a shadow root is rather expensive. Maybe this could be a new option to querySelector & querySelectorAll? e.g. querySelector(':host', {composed: true}).

[alice]

It might be good to check in with folks writing accessibility auditing tools who have been asking for this type of API for years, too. querySelector[All] might be sufficient, but it might be nice to have an option for TreeWalker as well?

[sorvell]

@rniwa

So in terms of the actual API shape, I'm thinking that we want some kind of a way to query across shadow boundaries because iterating over each element and checking the existence of a shadow root is rather expensive

It would be great if this API was not limited to extensions (although maybe they could have exclusive access to closed roots?).

It's very useful for testing or any operations that need to act deeply on shadow roots like styling.

Some related issues:

• [css-scoping] Replacement for >>> and /deep/, and ::shadow? w3c/csswg-drafts#5859
• [css-scoping] :has-shadow pseudo-class w3c/csswg-drafts#11007 / [css-selectors] new pseudo class that matches shadow hosts w3c/csswg-drafts#2908

[rniwa]

Please file a separate issue to track a proposal for non-extension use cases. This issue is specifically about adding an API for extensions.