Web component where styles leak in, but they don't leak out
npm install open-stylableTiny (<0.5kB min+gz) proof-of-concept implementation of an "open-stylable" web component. It can be styled from the global , even though it uses shadow DOM.
So basically: styles leak in, but they don't leak out.
``html`
#shadow-root
I'm red!
Install:
npm install open-stylable
Then use as a mixin:
`js
import { OpenStylable } from 'open-stylable'
class MyComponent extends OpenStylable(HTMLElement) {
constructor() {
super()
this.attachShadow({ mode: 'open' }).innerHTML = '
This custom element will use shadow DOM, but any styles from the
will be copied into its shadow root.$3
If you use
connectedCallback or disconnectedCallback, be sure to call super:`js
class MyComponent extends OpenStylable(HTMLElement) {
connectedCallback() {
super.connectedCallback()
/ Your code /
}
disconnectedCallback() {
super.disconnectedCallback()
/ Your code /
}
}
`$3
The
OpenStylable mixin allows you to use whatever constructor you like. For instance, with a Lit component:`js
class MyComponent extends OpenStylable(LitElement) {
/ ... /
}
`Limitations
This only works with open shadow DOM, not closed shadow DOM.
Also, it doesn't work with selectors that cross shadow boundaries, such as
body.foo *.Additionally, it only works for