customElements.define() 在 Chrome 67+、Firefox 63+、Safari 13.1+、Edge 79+ 原生支持，IE11 完全不支持；Safari 13.0 存在 connectedCallback 跳过 bug，需升级至 13.1。
customElements.define() 在哪些浏览器里能直接用
Chrome 67+、Firefox 63+、Safari 13.1+、Edge 79+ 原生支持 customElements.define()，无需 polyfill。IE11 及更早版本完全不支持，连 customElements 这个全局对象都不存在。
注意 Safari 13.0（2019年9月发布）有严重 bug：调用 customElements.define() 后首次插入自定义元素时，connectedCallback 可能被跳过——必须升级到 13.1 才稳定。如果你还在维护 macOS Catalina 上的旧 Safari，得加一层检测：
if ('customElements' in window && 'define' in customElements) {
customElements.define('my-button', MyButton);
} else {
console.warn('Custom Elements not supported');
}
注册失败的常见错误信息和原因
看到 Failed to execute 'define' on 'CustomElementRegistry': The name "xxx" is not a valid custom element name，基本就卡在命名或继承上。
- 名称不含短横线：比如
mybutton或MyButton—— 必须是my-button、ds-input这类 - 用了保留名：如
html、script、slot，浏览器直接拒绝 - 类没继承
HTMLElement：写成class MyButton {}或继承Object都会报错 - 重复注册同一名称：第二次调用
customElements.define('my-button', ...)抛NotSupportedError
connectedCallback 不触发？先查这三件事
connectedCallback 不是“写了就执行”，它只在元素**真正挂载进 active document 树**时触发。很多逻辑失效，其实只是 DOM 没到位。
立即学习“前端免费学习笔记（深入）”；
-
customElements.define()必须在 HTML 解析前或<script>执行时完成；如果放在window.addEventListener('DOMContentLoaded', ...)里，而 HTML 已含<my-button>，那它会被当HTMLUnknownElement处理，永远不进回调 - 动态创建后没
appendChild()：比如const el = document.createElement('my-button');但没插入任何父节点，就不会触发 - 用
innerHTML插入：例如div.innerHTML = '<my-button></my-button>'，部分老浏览器（尤其 Safari 14 之前）可能不触发生命周期，应改用document.createElement()+appendChild()
attributeChangedCallback 为什么收不到变化
这个回调极其“守规矩”：不声明、不监听、不响应。
- 必须显式定义
static get observedAttributes()，返回字符串数组，比如return ['size', 'disabled']；写成return ['Size']或漏掉引号都会失效 - 只响应 attribute 变更，不是 property：用
el.size = 'large'不触发；得用el.setAttribute('size', 'large')或初始写在 HTML 里<my-button size="large"> - 首次渲染的属性值不会进这个回调，
oldValue是null，所以初始化逻辑不能只靠它，得在connectedCallback里补读this.getAttribute('size')
最常被忽略的一点：自定义元素一旦注册，就成为真实 DOM 节点类型，能被 instanceof HTMLElement 判定，也能被 Lighthouse、axe 等工具识别为语义化组件——但这前提是命名合规、注册时机正确、生命周期使用得当。少一个环节，它就退化成普通未知标签，所有能力归零。
