template.content.clonenode(true)是唯一安全克隆方式，必须在connectedcallback中执行；直接innerhtml写字符串会导致失效、xss风险、无法响应外部内容且难维护。
template.content.cloneNode(true) 是唯一安全克隆方式
直接 innerHTML 写字符串到 shadowRoot 会丢掉 <slot></slot> 语义、无法响应外部传入内容、易 XSS，且 IDE 不识别 HTML 结构。真正要复用模板，必须走 template + cloneNode(true) 路线。
常见错误是写成 shadowRoot.appendChild(template.content) ——template.content 是 DocumentFragment，只能被移动一次，第二次实例化时它已为空，导致组件空白或报错。
-
cloneNode(true)深克隆所有节点（含文本、事件绑定上下文），每次调用都返回全新副本 -
cloneNode(false)只克隆子元素，丢失文本节点和事件监听器，不适用于含插槽或动态文本的模板 - 克隆后立即操作：设置
textContent、绑定事件、填充 fallback 内容，别等到异步回调里再处理
template 必须在 light DOM 中可稳定查询
template 标签不能放在 shadowRoot 里，也不能靠相对路径查找；它必须在文档解析完成前就存在于 light DOM，并能被 document.getElementById() 或 document.querySelector() 稳定获取。
构建工具（如 Vite）注入模板时，要确保它出现在自定义元素定义之前——否则 customElements.define() 执行时还查不到 template，querySelector 返回 null。
- 推荐放在
底部，或紧挨着组件 JS 的<script></script>标签之后 - 用
id定位最可靠，避免用class或data-*——多个组件实例可能冲突 - 不要在
constructor里查template，此时 DOM 还没解析完；connectedCallback才是安全时机
slot 在 template 里写法与外部使用必须严格匹配
<slot></slot> 不是占位符，是运行时内容搬运机制。它只在克隆后的 fragment 被 append 到带 Shadow DOM 的元素后才激活分发逻辑。template 里写错，外部就白传。
常见失效场景：命名插槽大小写不一致、空格多一个、name 值没加引号、外部 slot 内容没包裹在自定义标签内。
- 默认插槽写
<slot></slot>，外部传入子节点自动落入此处 - 命名插槽写
<slot name="header"></slot>，外部必须用<my-card><span slot="header">标题</span></my-card> -
slot属性值必须全小写、无空格、与 template 中name完全一致（区分大小写）
为什么不能把模板逻辑硬拼进 JS 字符串
像 shadowRoot.innerHTML = `<div><slot name="header"></slot></div>` 这种写法，<slot></slot> 就只是普通标签，浏览器不会识别为插槽；后续传入的子节点也不会被分发进去。
更麻烦的是：属性动态渲染得手动拼接、转义难保障、样式和结构耦合、没法被语法高亮、重构成本高。
- 字符串拼接无法支持条件 class（比如根据
this.getAttribute('size')动态加large类） - 没有 IDE 支持，改错一个引号就整个模板失效
- XSS 风险高：若拼接用户输入，
innerHTML不做任何过滤
真正封装组件，template 是结构边界，JS 是行为边界，两者物理分离才可控。一旦开始拼字符串，就等于放弃 Web Components 的核心价值——可维护性与可组合性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
