自定义元素名必须含破折号且全小写，如my-button；需显式注册并继承HTMLElement；属性变更需声明observedAttributes；Shadow DOM需手动启用以实现样式隔离。
自定义元素名必须含破折号且全小写
浏览器只认带 - 的名字，比如 my-button 合法，mybutton 或 MyButton 会被当普通未知标签处理，不触发自定义行为。名字里不能有大写字母、下划线或数字开头——tab-panel ✅，TabPanel ❌，1panel ❌。
常见错误：用 PascalCase 命名后发现 customElements.define('UserCard', ...) 报错 Failed to execute 'define' on 'CustomElementRegistry': The name "UserCard" is not a valid custom element name。原因就是没破折号。
- 必须用 kebab-case：全部小写 + 至少一个
- - 避免与未来 HTML 标准冲突：别用
time-picker这类可能被原生采纳的词（目前还没，但风险存在） - 项目前缀建议加：如
acme-button，防第三方库同名覆盖
必须显式注册且继承 HTMLElement
光写个 <my-input></my-input> 不会自动生效。得用 customElements.define() 注册，且构造函数必须继承 HTMLElement 或其子类（如 HTMLButtonElement）。
容易踩的坑是直接 extends Object 或漏写 super()，导致实例无法挂载到 DOM，控制台报 Illegal constructor。
立即学习“前端免费学习笔记（深入）”；
- 基础写法：
class MyInput extends HTMLElement { constructor() { super(); } } - 注册必须在元素使用前执行，否则首次渲染时无行为（不是异步延迟问题，是注册时机）
- 不能重复注册同名元素，否则抛
DOMException: Duplicate definition
DOM 结构与属性同步要手动处理
自定义元素没有内置属性映射，比如你写 <my-toggle checked></my-toggle>，checked 属性不会自动变成实例上的 this.checked = true，也不会触发 attributeChangedCallback —— 除非你显式声明 observedAttributes。
典型场景：想响应 disabled 变化来切样式，但忘了在 static get observedAttributes() 里返回 ['disabled']，结果属性改了，UI 毫无反应。
- 需要监听的属性必须列在
observedAttributes静态 getter 中 -
attributeChangedCallback里拿到的是字符串值，布尔属性如checked会是null或""，需手动转布尔 - 属性变更不等于状态变更：设置
el.disabled = true不触发 attributeChangedCallback，要用el.setAttribute('disabled', '')
Shadow DOM 不是默认开启，隔离需主动启用
很多人以为自定义元素天然带样式隔离，其实默认完全不启用 Shadow DOM —— 所有样式仍走全局作用域，容易被外部 CSS 覆盖，也容易污染别人。
一个常见误操作：在 connectedCallback 里直接 this.innerHTML = '...'，结果组件内 .icon 类名和页面其他地方冲突，改一处崩三处。
- 必须手动调用
this.attachShadow({ mode: 'closed' })或'open' -
mode: 'closed'下，外部 JS 无法通过el.shadowRoot访问内部结构（更安全） - Shadow 内部不能再用
document.querySelector，得用this.shadowRoot.querySelector
真正卡住人的往往不是语法，而是“写了但没生效”：名字合法却没注册、属性写了但没观察、用了 Shadow 却忘了把模板塞进去。每个环节都得手动搭桥，少一步，组件就只是个空壳标签。
