Vanilla web components slots

Help Requests
1

I am building a vanilla web component and using it in aurelia but having some odd behaviour on the slot
I have a fixed structure and want the children of the custom element to be placed in a particular place in the web component structure.

<template id="label-composite-template">
    <label></label>
    <div></div>
    <slot></slot>
</template>

creating a instance of this template using importNode and then adding it to the custom element as

this.appendChild(instance);

The component is used as

<label-composite>
    <input value.bind="context.name" type="text">
<label-composite>

and when I look at what this produced in the html I get

<label-composite >
    <input value.bind="context.name" slot="input" class="au-target" au-target-id="120">
    <label></label>
    <div></div>
    <au-shadow-slot class="au-target" au-target-id="100"></au-shadow-slot>
</label-composite>

but I expected the input to be in the slot position not at the top.

Are there any additional steps I need to take to ensure that the element shows in the slot position?

2

If you want to use natice shadow dom, you need to decorate your class witg @useShadowDOM. You can import it from Aurelia.

3

I don’t really want to import any aurelia spesific code here because I want reuse with out any framework. In theory if I implement a native shadow dom implementation, should I expect this to work?
I don’t currently so that would make sense.

4

By default Aurelia assumes you wanna use simulation of <slot/>, as by the time it was created, the slot spec was not stable, and browser support wasn’t good.

The decorator is to tell Aurelia to not use the simulation, and decorating your class with @useShadowDOM doesn’t make make it not reusable.

5

If your use-case is to not use @useShadowDOM because you don’t want to import anything from Aurelia, then just simply take a look at its implementation here. It’s just a decorator that essentially adds targetShadowDOM and shadowDOMOptions statically which you could do by yourself.

6

Shouldn’t it be reversed now then?

7

That’s a massive breaking change to people’s apps. And not everyone prefers shadow DOM over light dom

8

Maybe we can have a global config, where shadowDOM is enforced by default to every custom element. @Kukks