Impossible to style shadow-DOM - Not anymore...

[Procyon-b]

Early this week one of my most visited websites moved parts of its content to shadow-root elements, making it impossible to style with userstyle, or any global stylesheet. Fortunately they use "open" shadow which allowed me to quickly write a userscript to inject some style directly into them.

In the past I've already played with shadow elements by patching attachShadow() allowing me to interact with "closed" shadow-root (the wayback machine's header). The idea was to use this knowledge to write a userscript to run as a bridge between stylus and shadow-DOM elements.
Two CSS selectors in particular are used in conjunction with shadow-DOM: :host and :host-context. This will help to limit the amount of style rules injected in each shadow-root.

With the userscript running in the current page (and frames, if necessary), any use of :host within stylus will immediately style shadow-DOM elements if they match the full selector. If the user has enabled "Live preview" the modifications will be applied immediately on shadow elements.

How the userscript works:

• it patches attachShadow() to capture creation of the elements. (With a small trick in the code to prevent detection by the webpage. When they try)
• it monitors injection/modification/re-order/ejection of stylus <style> elements.
• when a stylesheet is added/modified, its style rules are parsed to find :host selectors.
• when stylus adds/modifies userstyles, the userscript parses all of them for relevant rules, concatenate them in the order specified by stylus, and if there is something to inject, adds a <style> element in each shadow-root with that style.
• it monitors modifications of the shadow-root to prevent removal of its injected styles.

I've tested with both FF and chrome (current and older versions) and it's running smoothly.

Note that for the moment the current version of the script doesn't match any website. You'll have to edit the settings of the userscript in your userscript manager to add matching urls. Don't forget the trailing *.

You can get the userscript here.

There is a how-to on that page to quickly test the script on a webpage with shadow-DOM (wayback machine).

[decembre]

Interesting project.

Not tested yet, but just a question.

You speak about these selector:
:host or :host-context
:host [developer.mozilla.org]

These selectors are relatively new, by example:
Firefox > 63

I use too Waterfox Classic, which is based to Firefox v.57:
Your script can run with it ?

Actually i don't find a website which use shadoow-DOM with Waterfox Classic.
Maybe they detect it...

Some test i do with an other userscript:
Styling Wayback Machine's header (aka toolbar) - #962 (comment)
And an other request about:
Apply styles to ShadowDOM #739

[Procyon-b]

I haven't tried yet with the very old versions. I've FF 56 lying around and apparently HTMLElement.prototype.attachShadow isn't defined. [Edit:] The header can be styled without problem. [/edit]
One thing I have to fix is to test if the function exists and bail out if not. Or it can screw the page making it think that shadowing is possible.

By the way, the script doesn't modify the selectors. They are passed to the shadow-root and since the browser understand :host all is well. It even allows the end-user to target shadow elements based on a specific shadow-root holder element: ``:host(div.holder)`

[decembre]

Thanks ;-)