Container Components

When a component is used in an element tree, the child elements written inside its use site belong to that component. By default they are appended to the children of the component’s root element. The @children expression overrides that placement: it marks the single position within the component’s own element hierarchy where those use-site children are inserted.

component BoxWithLabel inherits GridLayout {
    Row {
        Text { text: "label text here"; }
    }
    Row {
        @children
    }
}

export component MyApp inherits Window {
    preferred-height: 100px;
    BoxWithLabel {
        Rectangle { background: blue; }
        Rectangle { background: yellow; }
    }
}

slint

@children is an expression that stands in for the use-site children, not a macro. It takes no arguments and appears on its own where a child element would appear. Writing anything other than children after @ is a compile error.

Placement

@children may appear directly inside any element of the component’s tree, at the position among that element’s children where the use-site children are to be inserted. The children are inserted as children of the element that encloses @children, at that exact position; siblings written before and after @children keep their order around them. In the example above the two rectangles become children of the second Row rather than direct children of BoxWithLabel.

At most one @children is allowed across the whole component hierarchy. A second @children in the same element is a compile error, and a @children in one element when another element in the same component already has one is also a compile error.

@children cannot appear inside a repeated element (for), a conditional element (if), or a match element; each is a compile error. It also cannot appear inside a ComponentContainer.

A component that contains no @children still accepts use-site children; they are appended after the root element’s own children.

Layout and parenting

The inserted children participate in the enclosing element exactly as if they had been written there directly. When that element is a layout, they become cells of that layout and are laid out by it. Their bindings and callbacks are evaluated in the scope of the use site where they were written, not the scope of the component that contains @children.