<slot>

[DrSensor]

• 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:

• nested slot
• manual slot assignment
• nested <render-scope>
• scoped custom-element

---

<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:

• Conditional rendering #7
• reactive/bindable **Iterable** data structure #65