# Including content

## Using xbl:content

The `xbl:content` element allows copying elements which are descendant elements from the bound node. The selectors work as if applied to an XML document rooted at the bound node.

Say you have this markup:

```markup
<fr:inline-input ref="name">
    <xf:label>Name</xf:label>
</fr:inline-input>
```

The implementation of the `fr:inline-input` component can copy the nested `xf:label` element under a group as follows:

```markup
<xf:group>
    <xbl:content includes="xf|label"/>
```

The CSS selection expression above is exactly equivalent to writing in XPath:

```markup
descendant-or-self::xf:label
```

Note the difference of notation in XML/XPath and in CSS to refer to qualified element names:

* XML/XPath uses a "colon" character: `foo:bar`
* CSS uses a "pipe" character: `foo|bar`

Both XPath and CSS are expression languages allowing selecting nodes from XML documents, but they have a quite different syntax!

Now here is a more complex scenario:

```markup
<fr:link-select1 ref="gender">
    <xf:label>Gender</xf:label>
    <xf:itemset ref="instance('genders')/gender">
        <xf:label ref="label"/>
        <xf:value ref="value"/>
    </xf:itemset>
</fr:link-select1>
```

You would think that the implementation of the `fr:link-select1` component could simply copy the nested `xf:label` element as follows:

```markup
<xf:group>
    <xbl:content includes="xf|label"/>
```

But this doesn't work properly because the CSS selector `xf|label` actually returns *all descendant label elements*, including the `xf:label` element under `xf:itemset`.

The recommend way to express this is as follows:

```markup
<xf:group>
    <xbl:content includes=":root > xf|label"/>
```

The `:root` pseudo-class refers to the bound element (here `fr:link-select1`). The `>` combinator "describes a childhood relationship between two elements", like the XPath `/` axis. So the result is equivalent to the XPath:

```markup
/*/xf:label
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.orbeon.com/xforms/xbl/guide/including-content.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.