This is an exploration of using light and shadow DOM together in a custom element.
- stories/mixed-message and stories/mixed-message-thread explore rendering content in light DOM internally in a component and then slotting into shadow DOM.
- stories/mixed-dynamic verifies that elements rendered in the light DOM by the component are reactive.
- stories/mixed-external-slots explores what happens when both the client and the component renders slots to the light DOM.
- stories/mixed-hidden-slots is a failed attempt to hide internal slots used to render both in light and shadow DOM in a custom component.
- stories/nested validates that slots can be forwarded in a custom element to its children, and (fails) to do the same in a component that uses just light DOM.