inject styles of stylus-addon in shadowRoot
Userscript that automatically injects styles from Stylus (and other userstyle managers) into any shadowRoot.
This allows you to customize web components and encapsulated elements that normally would not inherit your styles.
The key selector is :host.
It refers to the shadow host element of the shadowRoot, letting you apply styles only inside the shadow boundary.
/* Apply to all elements on the page */
* {
border: 1px solid violet;
}
/* Apply only to elements inside the shadowRoot */
:host * {
border: 1px solid mediumpurple;
}
/* Apply styles only if the host has a specific class */
:host(.dark-theme) {
border: 1px solid blue;
}
GPL-3.0-only