# Sub-Compositions
A sub-composition is a separate HTML file embedded in a host composition. HyperFrames loads it, seeks it independently, and composites the result into the host at `data-start`.
## Host Wiring
In the host composition, the sub-composition appears as a clip with `data-composition-src`:
```html
```
- `data-composition-id` on the host must match the internal `data-composition-id` of the file at `data-composition-src`.
- The host clip needs its own `data-start`, `data-duration`, `data-track-index`, `data-width`, `data-height`.
## Sub-Composition File Structure
### Mental model — what the runtime actually does
When a host loads a sub-composition via `data-composition-src`, the runtime:
1. `fetch`es the HTML file.
2. Parses it with `DOMParser`.
3. **Finds the `` element and clones ONLY its contents into the host slot.**
4. Everything **outside** the `` (including the entire ``) is **discarded**.
So `` is not just a wrapper — it is the **transport container**. If a node needs to exist in the live render, it must be inside ``. Full stop.
### File shape
```html
```
Contrast with **standalone** compositions, which put the root directly in `` with no `` wrapper.
## Common pitfalls that pass static checks but break at render
`lint`, `validate`, and `inspect` evaluate each file in isolation. These two failures live in the **cross-file mount contract** and cannot be caught until the runtime actually tries to mount the sub-composition. Watch for them at author time and verify with the pre-render checklist below.
### Pitfall 1 — `
...
...
```
**Why this happens:** standard HTML conventions tell you to put `