Shadow DOM

Using shadow roots in components

To get 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. Alternativly, you can add a shadow-root attribute to the outer element. In this case, they child elements of the outer element are all appended to the shadow root.

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

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

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

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

/* returns:
<div id='c1'>
        Before children
            <div>Child 1</div>
            Child 2
        After children

Did this doc help you?

Privacy Policy

Help us improving our docs

Our documentations are fully open source. Something is wrong or unclear? Edit documentation.

Make a contribution