ayo/wcb
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: mention shadow dom usage on readme

Browse source
This commit is contained in:
Ayo 2023-12-27 12:52:01 +01:00
parent 2f46ad3c67
commit d42fbc0e40
1 changed files with 14 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
README.md
View file

@ -26,6 +26,7 @@ The result is a reactive UI on property changes. [View on CodePen ↗](https://c
1. [Prop access](#prop-access) 1. [Prop access](#prop-access)
1. [Alternatives](#alternatives) 1. [Alternatives](#alternatives)
1. [Styling](#styling-beta) 1. [Styling](#styling-beta)
1. [Shadow DOM Opt-In](#shadow-dom-opt-in-beta)
1. [Just the Templating](#just-the-templating) 1. [Just the Templating](#just-the-templating)
1. [Quick Start Example](#quick-start-example) 1. [Quick Start Example](#quick-start-example)
1. [Life-Cycle Hooks](#life-cycle-hooks) 1. [Life-Cycle Hooks](#life-cycle-hooks)
@ -237,6 +238,19 @@ class StyledElements extends WebComponent {
customElements.define("styled-elements", StyledElements); customElements.define("styled-elements", StyledElements);
``` ```
## Shadow DOM Opt-In (beta)
Add a static property `shadowRootInit` with object value of type `ShadowRootInit` (see [options on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#options)) to opt-in to using shadow dom for the whole component.
Try it now [on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/VwRYVPv?editors=1010)
Example:
```js
static shadowRootInit = {
mode: "closed",
};
```
## Just the Templating ## Just the Templating
You don't have to extend the whole base class just to use some features. All internals are exposed and usable separately so you can practically build the behavior on your own classes. You don't have to extend the whole base class just to use some features. All internals are exposed and usable separately so you can practically build the behavior on your own classes.