Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/juicy/slot-all
Custom element to distribute all elements regardless of their slot name
https://github.com/juicy/slot-all
Last synced: 11 days ago
JSON representation
Custom element to distribute all elements regardless of their slot name
- Host: GitHub
- URL: https://github.com/juicy/slot-all
- Owner: Juicy
- License: mit
- Created: 2018-07-02T16:10:51.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-19T17:54:49.000Z (about 6 years ago)
- Last Synced: 2024-10-11T18:26:16.961Z (about 1 month ago)
- Language: HTML
- Homepage:
- Size: 27.3 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# <slot-all>
A custom element to distribute all elements regardless of their slot name
## Demo
[Check it live!](http://Juicy.github.io/slot-all)
## Install
Install the component using [Bower](http://bower.io/):
```sh
$ bower install slot-all --save
```
Or [download as ZIP](https://github.com/Juicy/slot-all/archive/master.zip).
## Usage
1. Import polyfill:
```html
```
2. Import custom element:
```html
```
3. Start using it!
```html
#shadow-root
Named slot
```
## Caveats
## Observing slottable elements in polyfilled browsers
WebComponentsJS Shadow DOM polyfill has some limitations.
It does ignore `node.remove()` and `.insertAdjacentElement()` calls,
meaning it cannot be observed or reflected in shadow root. This result in `slot-all` element being unable to react on child nodes been added or removed using these methods. If you are targeting polyfilled environments try using `node.parentNode.removeChild(node)` and `insertBefore`.
See issues https://github.com/webcomponents/shadydom/issues/260, https://github.com/webcomponents/shadydom/issues/261, https://github.com/webcomponents/shadydom/issues/262, https://github.com/webcomponents/shadydom/issues/263.
## NOT observing slots in runtime
This custom element creates slots once it's connected and observes host's children. But it does **not observe other slot elements** in the same tree. Meaning, if you add or remove some slot elements after `` did its job, the element will not correct the list of its slots. For example
```
Foo
Bar
#shadow root
#/shadow root
```
will distribute "Foo" and "Bar", then if you later remove `` by yourself, `Foo` will no longer be distributed.
## [Contributing and Development](CONTRIBUTING.md)
## History
For detailed changelog, check [Releases](https://github.com/Juicy/slot-all/releases).
## License
MIT