<p>template.content 必须克隆后才能插入 Shadow DOM，直接 append 无效；正确做法是先 attachShadow，再 cloneNode 或 importNode；slot 仅在 Shadow DOM 中对宿主直系子节点生效；data- 属性值恒为字符串，需手动转换类型。</p>
template.content 必须克隆后才能插入 Shadow DOM
直接把 template.content append 到自定义元素的 this 或普通容器里，页面什么都不会显示——它只是个只读的 DocumentFragment，浏览器静默丢弃，不报错也不渲染。
正确做法是先调用 this.attachShadow({ mode: 'open' }) 创建 shadow root，再用 template.content.cloneNode(true) 或 document.importNode(template.content, true) 克隆一份可挂载的副本。
- 克隆后才能对节点调用
querySelector、addEventListener等操作 - 别在
constructor里做这事，应放在connectedCallback中，确保宿主已插入文档 - 克隆体里的
<style>会随节点一起进入 Shadow DOM，样式天然隔离
slot 不自动解析 template 内部内容
<template><slot name="header"></slot></template> 这种写法完全无效：template 只是声明一段待克隆内容，内部的 <slot> 不会被解析，也不会触发任何分发逻辑。
slot 只在 Shadow DOM 上下文中生效，且只对自定义元素的**直系子节点**做内容分发。必须桥接：template 存结构，自定义元素挂 Shadow DOM，再把克隆后的 template.content 插入 shadowRoot。
立即学习“前端免费学习笔记（深入）”；
- 模板中写
<slot name="header">Default</slot>，使用时必须是宿主标签的直系子节点：<my-card><h2 slot="header">Title</h2></my-card> - slot 匹配严格区分大小写和层级，
slot="Header"和slot="header"不匹配 - 多个默认
<slot>会被合并，顺序按 DOM 流，不是按模板里写的顺序
data- 属性驱动样式切换而非硬编码 class
想让同一个组件在不同场景下用不同主题或状态样式？别写一堆 if (mode === 'dark') this.classList.add('dark')，把决策权交给属性。
例如用 data-theme="dark" 触发 CSS 变量切换，或用 data-size="large" 控制 padding 和 font-size。关键点在于：dataset 自动转驼峰（data-user-id → this.dataset.userId），但值永远是字符串。
- 需要数字时得手动
parseInt(this.dataset.userId)，别依赖类型推断 - 用 CSS 自定义属性配合
[data-theme="dark"]选择器，比切换 class 更灵活 - 避免在 JS 中拼接 class 字符串，改用
classList.toggle('active', this.hasAttribute('data-active'))
is 属性复用原生标签时的继承限制
想绕过 customElements.define() 的注册时机问题（比如 CMS 输出 HTML 时脚本还没加载完），可以用 is 让原生标签“假装”是自定义元素，但前提是类必须继承对应内置元素。
例如：<button is="my-button" data-variant="primary">Submit</button> 能工作，仅当 MyButton 继承自 HTMLButtonElement 且注册时传了 { extends: 'button' }。
- 只对可扩展的内置标签有效（
button、input、article等），div不行 - 继承
HTMLElement的类不能用is挂到button上，会失败 -
is是临时方案，长期维护建议统一走标准 Custom Elements 注册流程
真正容易被忽略的是：template 和 slot 之间没有隐式关联，它们像两个零件，缺了 JavaScript 桥接就组装不成组件；而 data- 属性看似简单，一旦忘了值永远是字符串，就可能在比较或计算时出隐蔽 bug。
