可复用HTML组件模板系统的核心是结构分层、样式收口、内容契约；必须使用带短横线的合法自定义元素名（如my-button），且仅能通过template.content.cloneNode(true)安全克隆，Shadow DOM须设mode:'open'，slot实现内容分发，attributeChangedCallback需显式声明属性并避免JS直赋。
直接说结论：可复用 HTML 组件模板系统，核心不是“怎么写得多”，而是“怎么拆得清、管得住、换得动”。它不依赖框架，但必须有三层约束——结构分层、样式收口、内容契约。
组件命名必须带短横线，否则customElements.define会报错
浏览器强制要求自定义元素名含至少一个短横线（-），这是为避免和未来 HTML 标准冲突。写成 my-button 合法，mybutton、MyButton、button-card（开头或结尾带短横线）都会触发 Failed to execute 'define' on 'CustomElementRegistry'。
- 短横线不能连续出现（
my--button不合法） - 不能只含数字或纯字母（
123、card都不行） - 大小写不敏感，但惯例全小写 + 短横线（
data-input-field，不是DataInputField）
template.content.cloneNode(true) 是唯一安全的克隆方式
直接读 template.innerHTML 或字符串替换（如 .replace('{{name}}', 'Alice')）会丢节点、漏属性、绕过 XSS 防护，且破坏自闭合标签（<input>、<img alt="如何构建可复用的HTML组件模板系统" >）结构。
-
template.content是只读DocumentFragment，必须用.cloneNode(true)获取可操作副本 - 克隆后若含
id，必须重设（如el.id = 'card-' + Date.now()），否则多个实例 ID 冲突 - 克隆节点默认不带事件监听器，需插入后手动绑定，或在工厂函数里统一补
- 表单控件初始值不能靠 HTML 写死
value="xxx"，得显式赋值el.value = userData.phone
Shadow DOM 用 mode: 'open'，别碰 'closed'
mode: 'closed' 会让 el.shadowRoot 返回 null，DevTools 看不到结构，querySelector 查不到内部节点，Puppeteer/Jest 基本失效。除非你明确需要防样式劫持（如金融类组件），否则没理由选它。
立即学习“前端免费学习笔记（深入）”；
-
attachShadow只能调一次，重复调用会报This element already has a shadow root -
slot是内容分发核心，<slot name="title"></slot>对应<my-card><span slot="title">标题</span></my-card> - 样式隔离是 Shadow DOM 的默认行为，外部 CSS 不会穿透进来，内部样式也不会泄露出去
attributeChangedCallback 不触发？先查这三点
这个回调只响应你在 static get observedAttributes() 中显式声明的属性，且仅对 setAttribute、removeAttribute 或标签内写死生效。JS 直接赋值（如 el.disabled = true）不会触发。
- 确认返回的是字符串数组：
return ['loading', 'disabled']，不是对象或单个字符串 - 属性名必须完全匹配，
'loading'≠'Loading' - 不要在
constructor里就设置属性，此时connectedCallback还没执行，回调不会立即运行
最常被忽略的其实是内容字段契约——比如一个 FAQ 组件，如果每次都要手写 <h3>Q</h3><p>A</p>，那它只是 HTML 复制，不是组件。真正可复用的组件，其数据结构（question、answer、optional link）必须稳定，且与模板占位逻辑一一对应。
