template标签必须置于light DOM中并设稳定id，克隆须用cloneNode(true)，slot分发仅在克隆后插入shadowRoot才生效，动态绑定应避免innerHTML拼接而采用data-bind机制。
template 标签必须放在 light DOM 里，且得有稳定 id
直接把 <template> 写在 <my-card> 的 shadowRoot 里，它就根本不会被解析——浏览器压根不处理 shadow DOM 里的 template。你得把它丢在 <body> 底部，或者和组件 JS 文件同级的 HTML 中，确保它在 customElements.define() 之前就已存在于文档中。
别用 class 或 data-* 当唯一标识：多个 <my-card> 实例同时存在时，document.querySelector('.card-tpl') 可能只拿到第一个，后面全失效。最稳妥的是 id="my-card-template"，再配 document.getElementById('my-card-template')。
常见错误现象：document.getElementById('xxx') 返回 null，接着 .content.cloneNode(true) 报错；原因往往是模板还没加载完就执行了组件定义，或 id 拼写/大小写不对（HTML id 是大小写敏感的）。
克隆必须用 cloneNode(true)，不能直接 appendChild(template.content)
template.content 是一个 DocumentFragment，它只能被移动一次。如果你写 shadowRoot.appendChild(template.content)，第一次实例化没问题，第二次就会发现 template.content 已为空——因为节点已被移走，后续克隆无从谈起。
立即学习“前端免费学习笔记（深入）”；
永远用 template.content.cloneNode(true)：参数 true 表示深克隆，保留所有子节点、文本节点、事件绑定上下文；false 只克隆一层子元素，会丢掉文本节点和内联事件监听器（比如 <button onclick="doSomething()">）。
性能影响：cloneNode(true) 比直接 innerHTML 字符串快，且避免重复解析 HTML；但若模板极复杂（含大量嵌套、脚本），仍建议做节流或懒加载控制。
slot 分发只在克隆进 shadowRoot 后才激活
这是最容易踩的坑：<slot name="header"></slot> 写在字符串里（比如 shadowRoot.innerHTML = '...'）完全无效——它只是普通标签，不会触发插槽分发逻辑。只有克隆自 <template> 的节点，在插入 shadowRoot 后，浏览器才会识别并绑定 slot。
所以正确链路是：template → cloneNode(true) → 插入 shadowRoot → 用户传入的 <div slot="header">... 才会被自动投射进去。
容易忽略的细节：slot fallback 内容（比如 <slot>默认标题</slot>）必须在克隆后立即检查是否被外部内容覆盖，否则可能渲染两次；建议在 connectedCallback 里做完克隆就调用 this.updateSlotFallback() 这类辅助方法。
动态属性绑定别硬拼字符串，优先用 data-bind + 遍历更新
如果组件要根据 this.getAttribute('size') 切换 class，千万别写成：shadowRoot.innerHTML = `<div class="card card--${size}">...</div>`——这既难维护，又容易 XSS（没转义用户输入），还绕过了 slot 和 Shadow DOM 的机制。
推荐做法：模板里用占位属性，比如 <div data-bind="class:cardSize">，然后在克隆后遍历所有 [data-bind] 节点，按规则解析赋值：
cloned.querySelectorAll('[data-bind]').forEach(el => {
const bind = el.dataset.bind;
if (bind.startsWith('class:')) {
const key = bind.split(':')[1];
el.className = `card card--${this.getAttribute(key) || 'md'}`;
}
});这样既保持模板结构干净，又让逻辑集中可控；比一堆 el.textContent = this.getAttribute('title') 更易扩展，也方便加类型校验或默认值 fallback。
真正灵活的布局组件，不在于模板多“智能”，而在于它能否稳住 slot 分发、撑住多次实例化、扛住动态属性变更——这些都卡在 template 克隆时机、克隆方式和插入位置三个环节上。漏掉任意一环，看着像封装好了，实际跑两三个实例就开始丢内容、错样式、不响应。
