☰

Style shadowDOM

Allow stylus to target elements in shadow-root

Tính đến 12-02-2023. Xem phiên bản mới nhất.

Tác giả
Achernar
Đánh giá
0 0 0
Phiên bản
0.2
Đã tạo
10-02-2023
Đã cập nhật
12-02-2023
Size
5 KB
Giấy phép
N/A
Áp dụng cho

This userscript allows Stylus' users to style shadow-DOM elements that are by definition out of reach of global stylesheets.

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 style settings (eg. in tampermonkey): open the userstyle, go to the style's "settings" tab and add the mask (don't forget the *) of the website(s) you want to run it on.

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. Edit a new stylesheet, matching https://web.archive.org/web/* and define this style: :host * { outline: 1px solid red !important; }
  • 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).