不能直接将内容append到普通DOM节点，因其content是DocumentFragment，需先attachShadow再cloneNode(true)插入；内联自动作用于Shadow DOM，slot需在template中声明并用::slotted()控制样式，事件和数据需JS手动绑定。
为什么不能直接把 <template></template> 内容 append 到普通 DOM 节点上？
因为 <template></template> 的 content 是一个 DocumentFragment，它没有父节点，也不能直接被插入到非 Shadow DOM 的宿主元素中（比如 <div>）——浏览器会静默忽略或报错 <code>DOMException: Node cannot be inserted at the specified point。
常见错误现象：在自定义元素构造函数里写 document.getElementById('my-template').content 然后直接 appendChild 到 this，结果什么都没渲染出来，控制台也没报错，只是“消失”了。
- 必须先调用
this.attachShadow({ mode: 'open' })创建shadowRoot - 再用
shadowRoot.appendChild(template.content.cloneNode(true))——注意是cloneNode(true)，不是直接 appendcontent -
cloneNode(true)是必须的：template.content只能被克隆一次，重复使用会失败
<template></template> 里的 <style></style> 为什么只作用于 Shadow DOM？
因为 Shadow DOM 的样式作用域天然隔离：当 <style></style> 标签位于 template.content 中，并被克隆进 shadowRoot 后，它的 CSS 规则就自动绑定到该 Shadow Root 的作用域内。外部页面的 CSS 选中器无法穿透，内部样式也不会泄漏出去。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 别在
<template></template>外部再写一遍同名样式（比如全局p { color: blue; }），它不会覆盖 Shadow DOM 内的p - 如果用了
mode: 'closed'，连shadowRoot.querySelector('style')都拿不到，调试困难，基本不推荐 -
<link rel="stylesheet">在<template></template>里无效；必须用内联<style></style>或动态注入
如何让 <template></template> 支持 slot 内容分发？
slot 不是模板的属性，而是 Shadow DOM 的能力。你得在 <template></template> 结构里显式写 <slot></slot>，然后在自定义元素的 HTML 实例中传入对应命名或默认内容。
示例结构：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<template id="card-template">
<div class="card">
<slot name="header"></slot>
<slot>默认正文</slot>
<slot name="footer"></slot>
</div>
</template>
使用时：
<user-card> <h2 slot="header">用户信息</h2> <p>这是插槽填充的内容</p> <button slot="footer">操作</button> </user-card>
-
<slot></slot>必须出现在template.content克隆后的节点树里，不能靠 JS 动态加 - 没匹配上的
<slot name="xxx"></slot>会显示其 fallback 内容（如上面的空标签或文本） - slot 不会“继承”父级样式；如果想控制插槽内容样式，得用
::slotted()伪元素
模板克隆后，事件监听和数据绑定怎么处理？
克隆出来的节点是静态 DOM，没有行为逻辑。所有交互必须在克隆完成之后、挂载到 shadowRoot 之后，由 JS 显式绑定。
典型做法：
- 在自定义元素的
connectedCallback中查this.shadowRoot.querySelector('button')并加addEventListener - 不要在
constructor里操作shadowRoot，此时它可能还没创建（尤其 SSR 或延迟加载场景） - 属性变化响应仍要靠
observedAttributes+attributeChangedCallback，模板本身不支持响应式 - 如果模板里有
<input>，记得手动同步 value 和属性，<template></template>不提供双向绑定
最易被忽略的一点：克隆后的节点脱离原 template 上下文，所有相对路径（如 src="./img.png"）、<script></script> 标签、内联事件（onclick="..."）全部失效或不执行。必须用 JS 控制逻辑，不能依赖模板内联行为。
