open-stylable

Tiny (<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





`

Demo

Usage

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