` -- 嵌套组合（动画、分组序列）
有关每种剪辑类型的属性的完整列表，请参阅 [HTML 架构参考](/reference/html-schema)。
## 嵌套组合
您可以通过两种方式将一个组合嵌入到另一个组合中：从外部文件加载或内联定义它。外部文件是可重用组合的推荐方法。
使用 `data-composition-src` 引用另一个 HTML 文件。框架自动获取文件，提取 `` 内容，安装它，执行脚本并注册时间线。
```html index.html theme={null}
```
每个外部组合文件将其内容包装在 `` 标记中：
```html compositions/intro-anim.html theme={null}
```
直接在父级内部定义嵌套组合。对于不需要重复使用的一次性组合物来说，这更简单。
```html index.html theme={null}
```
内联组合不使用 `` 标签或 `data-composition-src`。
### 项目结构
## 两层：基元和脚本
每个作品都有两层：
* **HTML** -- 原始剪辑（`video`、`img`、`audio`、嵌套组合）。声明性结构：播放什么内容、何时播放以及在哪首曲目上播放。由[数据属性](/concepts/data-attributes)控制。
* **脚本** -- 效果、过渡、动态 DOM、画布、SVG -- 通过 [GSAP](/guides/gsap-animation) 进行创意动画。脚本**不**控制媒体播放或剪辑可见性。
切勿使用脚本来播放/暂停/搜索媒体元素或根据时间显示/隐藏剪辑。框架根据数据属性自动处理此问题。重复此行为的脚本将与框架冲突。有关示例，请参阅[常见错误](/guides/common-mistakes)。
## 变量
HyperFrames 不会自动将 `data-var-*` 属性绑定到您的组合 DOM 或 CSS 中。
支持的模式是：
1. 使用 `data-composition-variables` （id + 类型 + 默认值）在子组件的 `` 根上声明一次变量。
2. 使用 `data-variable-values` 在每个组合主机上传递每个实例的值。
3. 使用 `window.__hyperframes.getVariables()` 读取组合内的解析值。运行时将主机的 `data-variable-values` 分层到每个实例声明的默认值之上，因此可以使用不同的值多次嵌入相同的源。
```html index.html theme={null}
```
```html compositions/card.html theme={null}
```
如果您在 `@hyperframes/core` 之上构建工具，则可以通过 `extractCompositionMetadata()` 读取相同的 `data-composition-variables` 数组，以用于 Studio 编辑 UI 和分析管道。
## 列表组合
使用 [CLI](/packages/cli) 查看项目中的所有合成：
```bash theme={null}
npx hyperframes compositions
```
## 下一步
有关时序、媒体和合成属性的完整参考
使用 GSAP 时间线将动画添加到您的作品中
从常见视频模式的内置示例开始
创作作品的完整架构