复用语义化结构的关键是模板内容本身必须自带完整语义层级，如用包裹真实内容而非空；禁止在模板中使用等顶级语义容器，javascript注入后需按html5规则匹配父容器语义角色。
用 `` 复用语义化结构，关键不是把标签“套进去”，而是让模板内容本身保持语义完整、上下文自洽。
模板内容必须自带语义层级
不能只写一个空 `
`，而要直接用 `` 或 `` 包裹真实内容结构。比如复用文章卡片，模板里就该是：
<template id="post-card"></template><article></article><header><h2>标题</h2></header><p>正文摘要...</p><footer><time datetime="2026-07-28">今天</time></footer>
这样每次克隆出来，都是一个独立、可访问、SEO 友好的 `
main 和顶级语义容器不能出现在 template 里
`
- ✅ 允许：`
`、` `、` - ❌ 禁止：`
`、页面级 ` `、页面级 ` - ⚠️ 注意：如果模板用于生成侧边栏模块，用 `
JavaScript 注入时要补全语义上下文
从 template 克隆内容后，不能直接 append 到任意位置。得确认父容器是否匹配语义逻辑：
- 把 `
` 卡片插入 ` ` 内？✔️ 合理 - 把 `
` 插入 ` - 把 `
` 插入另一个 ` `？⚠️ 可以，但需确保子 section 有明确主题且带 ` ` 或更高阶标题，否则应改用 `
`简单说：template 提供的是“语义零件”，拼装时得按 HTML5 结构规则来——就像搭积木，每块标着“门”“窗”“墙”，不能把“门”装到屋顶上。
配合 slot 实现语义化插槽（仅限自定义元素）
原生 `` 不支持 slot，但若封装成自定义元素（如 `
`），就能用 ` ` 让外部传入语义化内容： - 组件内部 template 定义骨架：
<article><slot name="title"></slot><slot name="content"></slot></article> - 使用时传入语义化内容：
<post-card><h2 slot="title">我的博客</h2><p slot="content">这是一篇独立文章...</p></post-card> - 好处：标题仍是 `
`，正文仍是 `
`，语义不丢失，结构不扁平
不复杂但容易忽略：模板复用不是为了少写几行代码，而是为了保证每个实例都符合语义规范。写一次对的，比写十次错的再修更省力。
- 组件内部 template 定义骨架：
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
