search

AdguardTeam / ExtendedCss

A TypeScript library for non-standard element selecting — :contains(), :matches-css(), etc., and applying CSS styles with extended properties.
GNU General Public License v3.0
65 stars 9 forks source link

Add `/deep/` support to the ExtendedCss #52

Closed ameshkov closed 4 years ago

ameshkov commented 7 years ago

Yandex uses a complicated ads reinjection on the main page, we need to support /deep/ to handle it: https://www.yandex.ru/

theseanl commented 7 years ago

They attach a closed shadow root, which is introduced in Shadow DOM version 1, and is by specification invisible to third-party scripts. In such cases, even using querySelectorAll with /deep/ combinator does not return matched nodes in the shadow dom. There are several measures taken for other apis in order to un-expose presence of closed shadow dom, such as element.shadowRoot returning null, and Event.composedPath() not returning nodes in closed shadow dom.

We can wrap Element.prototype.attachShadow to keep track of shadow roots internally, and use this information for matching selectors. For this purpose, syntaxes like .row:shadow(> iframe[src^="data:html"] will be straightforward to implement. The standard >>> combinator does not play nicely with sizzle's api, we will need to modify significant portion of it.

ameshkov commented 6 years ago

Shadow DOM piercing implementation: https://codereview.adblockplus.org/29559743/