Greasy Fork is available in English.
Allow stylus to target elements in shadow-root
This userscript allows Stylus' users to style shadow-DOM elements that are by definition out of reach of global stylesheets.
Currently recognized userstyles managers are: "Stylus", "User JavaScript and CSS", "xStyle", "Stylish".
Any style rule whose selectors includes :host
or :host-context
will be injected into the shadow-root node.
By default the userscript is not running on any website. You'll have to edit the script settings (eg. in tampermonkey): open the userscript, go to the script's "settings" tab and add the mask of the website(s) you want to run it on (don't forget the trailing *).
To test:
https:
//web.archive.org/web/*
to "user matches"https:
//web.archive.org/web/2/
appended with the full url of a webpage.https
://web.archive.org/web/2/https://procyon-b.github.io/programming/
https:
//web.archive.org/web/*
and create this style::host * { outline: 1px solid red !important; }Without the userscript, only the normal elements are outlined (in green). With the userscript the elements in the header are outlined in red.
* { outline: 1px solid green !important; }