be-adoptive

be-adoptive

be-adoptive allows Shadow DOM to inherit styles from the parent element.

This provides a way to benefit from the slotting Shadow DOM provides, while being able to apply styles from the outside.

Demo

Native support in Firefox and Safari for constructible stylesheets is now available!

Syntax:

<style>
    span{
        color: red;
    }
</style>
<div>
    <template shadowrootmode="open">
        <style be-adoptive>
            div{
                color: green;
            }
        </style>
        <span>Hello</span>
        <be-hive></be-hive>
    </template>
</div>
<span>Hello</span>
<be-hive></be-hive>

To be fully HTML5 compatible, use data-be-adoptive instead of be-adoptive.

The be-hive component allows us to specify an alternative attribute name, and acts as a "conduit" for all the be-* components. Alternatively, we can place an instance of the be-adoptive web component in our shadow DOM, and that will have the same effect.

Note: It has become clear to me, after following a discussion of an alternative open-stylable, that this solution is far from complete. To be complete, the platform would need to provide a mechanism to subscribe to additions / removals of stylesheets from any Shadow DOM realm. Or implement this proposal, which would render this behavior obsolete (which would be great).

Viewing Locally

1. Install git.
2. Fork/clone this repo.
3. Install node.
4. Open command window to folder where you cloned this repo.

5. npm install

6. npm run serve

7. Open http://localhost:3030/demo/dev in a modern browser.