不能直接用 innerHTML 往 shadowRoot 里塞 HTML 字符串，因为会丢失模板预编译能力、样式作用域隔离的声明式控制及脚本延迟执行语义，且存在 XSS 风险；正确做法是通过 document.importNode(template.content, true) 克隆后插入。
为什么不能直接用 innerHTML 往 shadowRoot 里塞 HTML 字符串
直接写 shadowRoot.innerHTML = '<p>hello</p>' 看似简单，但会丢掉三样关键东西：模板预编译能力、样式作用域隔离的声明式控制、以及脚本延迟执行语义。更严重的是，若字符串来自用户输入或后端响应，innerHTML 会绕过浏览器对内联 <script></script> 的默认阻断逻辑——而 <template></template> 内部的脚本天然不执行，直到被克隆并插入真实 DOM，这才是安全前提。
如何用 <template> 预定义结构并注入到 shadowRoot
核心流程是：声明模板 → 获取其 content → 深度克隆 → 插入 shadowRoot。注意不是所有模板都能直接复用，需满足两个条件：
- 模板必须在文档中已存在（不能仅靠 JS 动态创建后立刻
querySelector） - 克隆前确保
shadowRoot已通过attachShadow({ mode: 'open' })创建成功，否则appendChild会静默失败
典型写法：
class MyCard extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
const template = document.getElementById('my-card-template');
const content = template.content.cloneNode(true);
shadow.appendChild(content);
}
}模板本身可带 <style>，它会随 content 一起克隆，且只作用于该 shadowRoot 内部，无需加 scoped 或 BEM 前缀。
立即学习“前端免费学习笔记（深入）”；
多个实例共享同一模板时，如何避免状态污染
每个 MyCard 实例都调用 cloneNode(true)，得到的是完全独立的 DOM 片段，互不干扰。但要注意两处易错点：
- 模板内含
<input>或<textarea>时，克隆后不会继承原始值 —— 它们初始为空，需在组件初始化阶段手动同步属性值（如this.getAttribute('value')） - 若模板中用了
<slot>，则宿主元素内部的内容会被投影进去，但投影内容不属于该模板克隆体，父级修改会实时反映，这不是污染，而是设计预期 - 不要在模板里写
id="xxx"—— 克隆后多个实例会出现重复 ID，破坏document.getElementById行为，改用class或data-*属性
事件监听必须绑定在 shadowRoot 内部节点，而非宿主
因为 shadowRoot 是独立边界，宿主元素上监听不到内部按钮的 click。正确做法是在克隆完成后立即遍历并绑定：
const buttons = shadow.querySelectorAll('button');
buttons.forEach(btn => btn.addEventListener('click', this.handleClick.bind(this)));\n如果要用自定义事件向外通信，记得设 bubbles: true 和 composed: true，否则父页面收不到：
this.dispatchEvent(new CustomEvent('card-click', { bubbles: true, composed: true }));\n复杂单页应用里最常被忽略的，是模板中动态生成的节点无法自动获得组件实例上下文 —— 所有交互逻辑必须显式绑定，不能依赖闭包捕获外部 this，尤其在异步回调或定时器中。
