Add example and more info to readme

This commit is contained in:
Talia 2024-03-06 10:58:37 +01:00
parent 379194aee9
commit 91cdaad460
1 changed files with 25 additions and 0 deletions

View File

@ -3,6 +3,19 @@
A simple proof-of-concept implementation of a mechanism to pull outside styles
into a Shadow-DOM.
```html
<style>
p { color: red }
</style>
<my-component>
<template shadowrootmode="open">
<adopt-styles adopt="all"></adopt-styles>
<p>This paragraph is red</p>
</template>
</my-component>
```
## Rationale
This is primarily meant as a simple proof-of-concept to show how this mechanism
@ -14,6 +27,18 @@ The aim of this project is not to provide a full solution to the problem, but to
showcase how one possible solution could work and to allow playing around with
the concept in real-world projects.
## Usage
Putting the `<adopt-styles>` node inside a shadow root will search the document
for style sheets and adopt them into the shadow root. Changes in the document's
head that appear related to styles will trigger an update of the adopted styles.
Adding the `layer=` attribute to the `<adopt-styles>` node will wrap the adopted
rules in a layer of the given name.
(Not yet Implemented) Setting the `adopt=` attribute to a value other than
`"all"` will only adopt styles from the CSS layer of the given name.
## Notes
Due to this being a relatively "simple" javascript implementation, outside