customElements.define()注册失败主因是标签名不合法：必须含短横线、全小写、不以短横线开头或结尾，且类须继承HTMLElement并调用super()；connectedCallback总先于attributeChangedCallback执行，后者不触发初始属性。
自定义元素不是“给HTML加新标签”这么简单，它本质是把组件生命周期、封装边界和 DOM 语义权交还给开发者——只要你遵守短横线命名和 customElements.define() 这两条铁律，浏览器就认你。
为什么 customElements.define() 会直接报错？
绝大多数注册失败都卡在这一步，错误信息通常是 DOMException: Failed to execute 'define' on 'CustomElementRegistry'。这不是代码写错了，而是浏览器在拒绝非法注册：
- 标签名不含短横线（比如用
mybutton而不是my-button） - 用了大写字母或下划线（
MyButton、my_button都不合法） - 试图覆盖原生标签（
customElements.define('div', ...)会被拦截） - 类没继承
HTMLElement（箭头函数、普通对象、没调super()的构造器全都不行）
最稳的验证方式：在调用 customElements.define() 前加一行 console.assert(/^[a-z][a-z0-9]*-[a-z0-9]+[a-z0-9]*$/.test(name), 'invalid name')。
connectedCallback 和 attributeChangedCallback 到底谁先执行？
顺序固定：connectedCallback 总是先于 attributeChangedCallback 触发，哪怕元素带初始属性。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 首次渲染逻辑（如设置
this.innerHTML或挂载 Shadow DOM）必须放在connectedCallback里 -
attributeChangedCallback只处理“变化”，不负责初值——它不会收到初始属性值的回调 - 如果依赖属性做初始化，得在
connectedCallback里手动读一次this.getAttribute('xxx')
例如 <user-card name="Alice"></user-card> 渲染时，name 属性已存在，但 attributeChangedCallback 不会触发；必须在 connectedCallback 里显式取值。
用 is="xxx" 的内置扩展元素为什么总不生效？
自定义内置元素（如继承 HTMLButtonElement）必须满足三个条件才被识别：
- 注册时传了
{ extends: 'button' }选项 - HTML 中写成
<button is="my-button">，不能写成<my-button> - 对应类必须继承正确的基类（
HTMLButtonElement，不是HTMLElement）
常见坑：用 document.createElement('my-button') 创建的是独立元素，不是内置扩展；要创建内置扩展实例，必须用 document.createElement('button', { is: 'my-button' })。
Shadow DOM 是必须的吗？
不是。自定义元素可以完全不用 Shadow DOM，也能正常注册和使用。但不用它，就等于放弃封装性：
- 样式会泄漏到全局，
h1 { color: red }会影响所有页面h1 - 内部结构暴露在外，其他脚本能随意修改你的
innerHTML - 无法使用
<slot>实现内容分发，只能靠this.textContent或属性传参
真正需要 Shadow DOM 的场景，不是“想用”，而是“不得不防”——比如你写的 date-picker 被嵌入到别人用 Tailwind 的项目里，没有 Shadow DOM，它的 CSS 就会被重置掉。
