☰

Inject Stylus into shadowRoots

inject styles of stylus-addon in shadowRoot

2025/06/29のページです。最新版はこちら

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください
作者
hdyzen
評価
0 0 0
バージョン
1.0
作成日
2025/06/29
更新日
2025/06/29
大きさ
1.3KB
ライセンス
GPL-3.0-only
対象サイト
すべてのサイト

Inject Stylus into shadowRoots

This userscript injects styles from the Stylus extension directly into shadowRoot instances, allowing you to style the content of web components.

How to style content inside a shadowRoot

:host

To apply styles only to the content within a shadowRoot, use the :host pseudo-selector in your Stylus styles. :host refers to the element that contains the shadowRoot (the shadow host).

/* All elements */
* {
  border: 1px violet;
}
/* Only elements inside the shadowRoot */
:host * {
  border: 1px solid mediumpurple;
}

Similar forms: