本身不隔离样式和作用域，必须结合document.importnode()克隆并挂载到closed shadow dom中才能实现真正隔离，否则class、id、style仍受宿主影响。
直接用 <template></template> 不会隔离样式
很多人把 HTML 片段塞进 <template id="my-card"></template> 就以为天然“模块化”了，其实浏览器只是跳过渲染、不执行脚本——它既不隔离样式，也不封装作用域。一旦你用 innerHTML = tmpl.innerHTML 插入到主文档，所有 class、id、<style></style> 全部落在 light DOM 里，照样被宿主页面的 .header 或 * { margin: 0 } 覆盖。
常见错误现象：
- 子模板里写
<div class="header">，结果被主应用的 <code>.header { margin-top: 20px }改了间距 - 多个子应用共用同一份
<template></template>，填充后id="modal"重复，document.getElementById('modal')返回错对象 - 模板含
<script>console.log('init')</script>，克隆后插入 DOM，这段脚本根本不会执行 - 必须从
tmpl.content克隆，不能用tmpl.innerHTML—— 后者会丢失状态 - 克隆后需遍历
fragment.querySelectorAll('[data-bind]')手动填充，不要用正则替换{{title}}—— 容易 XSS，且无法处理属性绑定（如data-bind="src"） - 挂载时用
container.appendChild(fragment)，禁用innerHTML +=—— 否则已挂载的事件监听器会被销毁 - 模板内禁止硬编码
id，改用data-id或动态生成唯一标识（如data-id="${Date.now()}-${Math.random().toString(36).substr(2, 9)}"） - 在自定义元素 constructor 中调用
this.attachShadow({ mode: 'closed' })—— 缺少这句，等于没建墙 - 克隆模板后，用
shadowRoot.appendChild(fragment)挂载，而非直接 append 到 light DOM - 第三方编辑器（如 Quill、TinyMCE）初始化必须限定在 shadow 内部作用域：传入
shadowRoot.querySelector('.ql-editor')，而不是默认查document - 绝对不要往
shadowRoot.innerHTML里塞含<link rel="stylesheet">的字符串 —— 它会加载到全局，失去隔离意义 -
<img src="logo.png">在 shadow 内加载时，路径以 shadow 容器为基准，不是页面根目录 - 模板里的
<script>fetch('/api/user')</script>默认仍跑在全局window下，this、document都不是 shadow 内的上下文 - 若用
DOMParser解析 HTML 字符串，<style></style>必须转成CSSStyleSheet实例，再通过shadowRoot.adoptedStyleSheets = [sheet]注入（Chrome 73+ / Safari 16.4+ 支持） -
mode: 'closed'虽然更安全，但也会让 DevTools 无法查看 shadow 内容，需额外暴露调试钩子（如window.__debugShadow = () => shadowRoot）
document.importNode() 是安全克隆的底线操作
cloneNode(true) 看似简单，但它会丢掉表单控件状态：比如 <input checked> 的选中态、<select></select> 的当前选项、<textarea></textarea> 的用户输入值。而 document.importNode(tmpl.content, true) 能保留原生行为，兼容 Shadow DOM 场景，是微前端或可复用模板的硬性要求。
实操要点：
真正隔离必须配合 attachShadow({ mode: 'closed' })
<template></template> 本身无作用域，只有把它克隆后的 fragment 插入到 closed Shadow DOM 中，才能切断样式穿透和 DOM 查询链。否则，哪怕你用了 data-app="cart"，主应用的 [data-app="cart"] .btn 还是拦不住 Ant Design 的全局 .ant-btn 规则。
关键步骤：
资源路径和 JS 执行上下文最容易被忽略
Shadow DOM 的复杂点不在 API 调用本身，而在资源加载路径和 JS 执行上下文。比如：
