☰

Style shadowDOM

Allow stylus to target elements in shadow-root

目前为 2023-02-24 提交的版本。查看 最新版本。

作者
Achernar
评分
0 0 0
版本
0.2
创建于
2023-02-10
更新于
2023-02-24
大小
4.9 KB
许可证
暂无
适用于

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:

  • (in this script's settings) add https://web.archive.org/web/* to "user matches"
  • go to https://web.archive.org/web/2/ appended with the full url of a webpage.
    eg. https://web.archive.org/web/2/https://procyon-b.github.io/programming/
  • open stylus, or one of the supported userstyles manager.
    Edit a new stylesheet, matching https://web.archive.org/web/* and define this style:
    :host * { outline: 1px solid red !important; }
    * { outline: 1px solid green !important; }
    :host * { outline: 1px solid red !important; }<br>
* { outline: 1px solid green !important; }
    :host * { outline: 1px solid red !important; }<br>
* { outline: 1px solid green !important; }

Without the userscript, only the normal elements are outlined (in green). With the userscript the elements in the header are outlined in red.

  • this will outline all the element in the wayback machine's header with a red line. This is not possible without the userscript (try ; disable this userscript and reload the page).