slot-kin

Allow your web component to provide its own default light children.

(Probably wrong) web component kvetching

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.

Syntax

<my-web-component>
    #ShadowDom
        <slot-kin name="mySlot">
            <template>
                <div slot="mySlot">My Default Slot Content</div>
            </template>
        </slot-kin>
</my-web-component>

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:

<my-web-component>
    <div slot="mySlot">My Default Slot Content</div>
    #ShadowDom
        <slot-kin name="mySlot">
            <template>
                <div slot="mySlot">My Default Slot Content</div>
            </template>
        </slot-kin>
</my-web-component>

NB I Knowing when to check whether user-provided slots are provided is a bit dicey currently.

NB II Dynamically adding DOM light children to itself could get washed away if using an overly-controllingframework.