13 Shadow DOM.md

Shadow DOM

For more control over the location of child elements, shadow roots and slots can be used. To add a shadow root to the root element add a <shadow-root> element as the first child of the outer element. Alternatively, you can add a shadow-root attribute to the outer element. In this case, all of the outer element's child elements are appended to the shadow root.

import { template } from "uix/html/template.ts";

// define template:
const CustomComponentWithSlots = template(<div shadow-root>
    Before children
    <slot/>
    After children
</div>);

// alternative template definition:
const CustomComponentWithSlots2 = template(<div>
    <shadow-root>
        Before children
        <slot/>
        After children
    </shadow-root>
    This child is appended to the slot element inside the shadow root
</div>);

// create element:
<CustomComponentWithSlots id="c1">
    <div>Child 1</div>
    {'Child 2'}
</CustomComponentWithSlots>;

will render as:

<div id="c1">
    #shadow-root
        Before children
        <slot>
            <div>Child 1</div>
            Child 2
        </slot>
        After children
</div>