不能直接将内容写入shadowRoot.innerHTML，因为innerHTML仅解析字符串、丢失DocumentFragment结构及事件绑定，导致失效、样式错乱、脚本不执行；必须用document.importNode(template.content, true)克隆后插入。
为什么不能直接把 <template></template> 内容写进 shadowRoot.innerHTML
因为 shadowRoot.innerHTML 会把字符串当作纯 HTML 解析，而 <template></template> 的 content 是一个 DocumentFragment，它包含已解析的节点树、保留了事件监听器绑定能力，且天然支持 <slot></slot> 语义。直接 innerHTML 会丢失这些结构信息，导致 slot 不生效、样式作用域错乱、脚本不执行（即使写了也不会自动运行）。
常见错误现象：<slot></slot> 标签原样显示在页面上，或者投射内容完全不出现；shadowRoot.querySelector('slot') 返回 null；自定义元素内部样式被外部覆盖。
- 必须用
document.importNode(template.content, true)克隆，不能用template.innerHTML或template.outerHTML - 克隆后得到的是可操作的节点，可调用
querySelector、addEventListener等方法 - 如果模板里有
<style></style>，它会随content一起被克隆并插入 Shadow DOM，实现样式局部化
attachShadow() 后立刻用 importNode() 插入模板的典型顺序
顺序错了就白忙：Shadow DOM 创建和模板激活必须严格串行，且不能跳过克隆步骤。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先调用
element.attachShadow({ mode: 'open' })，拿到shadowRoot - 再获取
<template id="xxx"></template>元素，读取其.content - 用
document.importNode(template.content, true)深度克隆 —— 第二个参数true必须传，否则子节点不复制 - 对克隆体做动态修改（如填数据、绑事件），再
shadowRoot.appendChild(clone) - 不要在
constructor里操作 DOM，应在connectedCallback中执行，确保宿主已挂载
模板内 <slot></slot> 如何与 Shadow DOM 的投影机制配合
<slot></slot> 不是占位符标签，而是内容出口控制器。它只在 Shadow DOM 上下文中才有意义；放在 light DOM 里毫无作用。
立即学习“前端免费学习笔记（深入）”；
- 模板中写
<slot name="header"></slot>，宿主元素内对应要写<span slot="header">标题</span> - 没匹配的
slot名称时，内容会被丢弃（不是隐藏）；可用<slot></slot>作为默认出口 - 监听
slotchange事件才能感知投射内容更新，slot.assignedNodes({ flatten: true })才能拿到真实节点 - 样式上，
::slotted(*)只能设置简单继承属性（如 color、font-size），不能设display或margin—— 这些需由投射内容自身控制
容易被忽略的兼容性与调试陷阱
看似简单的组合，在实际项目里最容易栽在边界条件上。
-
<template></template>在所有现代浏览器中支持良好，但 IE 完全不支持，需 polyfill（如template-polyfill） - 某些 SSR 框架（如早期 Next.js）会把
<template></template>当普通标签渲染，导致服务端生成无意义的空标签 - DevTools 中看不到模板内容，但能看到 Shadow DOM 树里的克隆结果；若
shadowRoot显示为空，大概率是attachShadow调用失败或重复调用 - 模板内写的
<script></script>不会自动执行 —— 即使克隆进 Shadow DOM 也不行，必须手动创建新script节点并设置textContent后插入
importNode 这一步，或者误以为 <slot></slot> 能跨 Shadow DOM 边界自动“拉”内容。它只响应宿主元素子节点的 slot 属性，不爬取 DOM 树，也不触发重排。 
