template.content.cloneNode(true)是唯一安全克隆方式：必须取content→cloneNode(true)→插入，否则innerHTML为空、appendChild失效、querySelector找不到元素、事件丢失、表单重置。
template.content.cloneNode(true) 是唯一安全克隆方式
直接操作 <template></template> 内容会静默失败或破坏状态——template.innerHTML 为空，template.appendChild() 报错，template.content 是只读 DocumentFragment。必须走三步：取 content → 调用 cloneNode(true) → 插入目标节点。
常见错误现象：querySelector 找不到元素、事件丢失、表单控件重置为初始值（<select></select> 回到第一项、<input type="checkbox"> 变未勾选）。
- 别用
innerHTML覆盖整个子树：会销毁已绑定的事件监听器 - 克隆后务必用
querySelector或querySelectorAll单独注入数据，而不是覆盖整个 innerHTML - 若需保留表单状态（如用户已输入的值、选中的
option），必须改用document.importNode(template.content, true)，它能深拷贝可序列化的 DOM 状态 -
importNode必须在DOMContentLoaded后执行，否则template.content可能为空
data- 属性比 class 更适合模板锚点
用 class="js-title" 标记填充点看似简洁，但容易和 CSS 类名冲突，且无法携带结构语义；data-bind="title" 明确表达“此处由 JS 注入”，不参与样式，也不干扰选择器逻辑。
使用场景：页头模板中写 <p data-bind="copyright-year"></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>，JS 根据 new Date().getFullYear() 填充；卡片模板中用 <img data-bind="avatar" src="" alt="如何利用HTML模板构建可复用的标准化UI组件" >，避免硬编码路径。
- 禁止在
<template></template>中写id：克隆后 ID 重复，document.getElementById行为不可预测 - 条件渲染留空节点，比如
<span data-bind="user-name"></span>，JS 根据登录态决定是否赋值或textContent = '' - 模板内不要放
<script></script>或<style></style>：它们不会执行或生效；样式靠外部 class 或全局 CSS 控制
customElements.define 注册时的命名与继承陷阱
自定义标签名必须含短横线（my-card 合法，mycard 报 DOMException: The element name must contain a hyphen），这是浏览器强制校验，不是建议。
注册失败最常见原因不是语法错，而是类定义不合规：
- 第二个参数必须是继承
HTMLElement的类，不能是对象字面量、箭头函数或普通函数 - 类名不能以短横线开头或结尾（
-my-card、my-card-都非法） - 重复注册同一名称会抛错，开发时加守卫：
if (!customElements.get('my-card')) { customElements.define('my-card', MyCard); } -
constructor中只能调用super()和初始化属性，不能操作 DOM 或访问this.shadowRoot（此时尚未创建）
attributeChangedCallback 只响应声明过的属性变更
这个回调不会响应 el.checked = true 这类 JS 属性赋值，只对 setAttribute('checked', '')、removeAttribute('checked') 或 HTML 中写死的 <my-toggle checked></my-toggle> 生效。
想实现属性 ↔ 状态同步，必须自己补逻辑：
- 在
static get observedAttributes()中显式返回字符串数组，漏写就收不到回调 -
oldValue在首次解析 HTML 时为null，别直接用===判断 - 布尔属性（如
disabled、checked）的newValue是字符串或null，需转为布尔：input.disabled = newValue !== null - JS 属性赋值（如
el.disabled = true）要手动同步到 attribute：el.setAttribute('disabled', '')，否则下次getAttribute拿不到
真正麻烦的不是写法，是边界情况：模板克隆后 ID 冲突、表单状态丢失、attributeChangedCallback 漏监听、Shadow DOM 重复 attach —— 这些问题不会报明显错误，但会让组件在某些设备或交互路径下突然失效。
