[ ] replace all elements that has slot or slot: attributes into <slot> or <slot name="⟒"> when moved into shadow root while the elements still inside the top level host Element (a.k.a light DOM).
[ ] make all children in <template> inherit all of it's attributes. This mean all children will inherit the slot attribute of <template slot="⟒" slot:="…"> when moved into light DOM. Note that <template> are not moved into shadow DOM while all of it's children stay in the host Element without being wrapped by <template>…</template>.
To guarantee and not break the dom isolation, the implementation might involve one or many of this features:
<slot> is a native WebComponent feature. The usual usage is like a portal but I'm thinking it's worth more. For example, it can be used as a way to inject an island component from other framework. Another way is for conditional and list rendering. So this is more about documenting on how to use <slot> in that scenario. There is no need to implement <slot> from scratch or made custom functionality for certain use cases:
slotorslot:attributes into<slot>or<slot name="⟒">when moved into shadow root while the elements still inside the top level host Element (a.k.a light DOM).<template>inherit all of it's attributes. This mean all children will inherit the slot attribute of<template slot="⟒" slot:="…">when moved into light DOM. Note that<template>are not moved into shadow DOM while all of it's children stay in the host Element without being wrapped by<template>…</template>.To guarantee and not break the dom isolation, the implementation might involve one or many of this features:
<slot>is a native WebComponent feature. The usual usage is like a portal but I'm thinking it's worth more. For example, it can be used as a way to inject an island component from other framework. Another way is for conditional and list rendering. So this is more about documenting on how to use<slot>in that scenario. There is no need to implement<slot>from scratch or made custom functionality for certain use cases: