Add example and more info to readme
This commit is contained in:
parent
379194aee9
commit
91cdaad460
1 changed files with 25 additions and 0 deletions
25
readme.md
25
readme.md
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue