https://github.com/bahrus/slot-kin
Allow your web component to provide its own default light children.
https://github.com/bahrus/slot-kin
Last synced: 3 months ago
JSON representation
Allow your web component to provide its own default light children.
- Host: GitHub
- URL: https://github.com/bahrus/slot-kin
- Owner: bahrus
- License: mit
- Created: 2019-05-14T20:58:31.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-25T00:26:09.000Z (over 3 years ago)
- Last Synced: 2025-02-01T09:33:27.415Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 18.6 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/slot-kin)
# slot-kin
Allow your web component to provide its own default light children.
## (Probably wrong) web component kvetching
[Slots](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots) support a concept of default slot content. But it doesn't behave at all like I would expect it to behave. Unlike light children slot content, no slotchange event is fired, and outside styling can't reach this content. For all intents and purposes, it feels like shadow DOM, rather than default light children.
slot-kin is designed to behave like I would have wanted the default slot content to behave.
## The usefulness of default slot children
1. The ability to provide default slot children would provide a way of "self-documenting" the component, so users could inspect the element and see exactly what they need to do to create the output they need.
2. In some cases, a simple, native, default button can be used as part of the interface, but power users may want to specify specifically which button to use (for example which design library to use).
## Syntax
```html
#ShadowDom
My Default Slot Content
```
Does the following:
It checks whether a light child with slot="mySlot" exists. If it does, slot-kin does nothing.
If no such slot is found, it creates one:
```html
My Default Slot Content
#ShadowDom
My Default Slot Content
```
**NB I** Knowing when to check whether user-provided slots are provided is a bit dicey currently.
I think [this proposal](https://github.com/w3c/webcomponents/issues/809) would go a long way to making this possible to do reliably.
**NB II** Dynamically adding DOM light children to itself might run into issues if hosted within a framework that uses VDOM implementation.