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.
Native support in Firefox and Safari for constructible stylesheets is now available!
<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).
- Install git.
- Fork/clone this repo.
- Install node.
- Open command window to folder where you cloned this repo.
-
npm install
-
npm run serve
- Open http://localhost:3030/demo/dev in a modern browser.