自定义元素注册表浏览器 - 查看页面内所有 Web Components

自定义元素（Custom Elements）是 Web Components 标准的核心组成部分，允许开发者定义自己的 HTML 标签。自定义元素必须包含连字符（-），例如 <my-button>、<user-profile>，以避免与标准 HTML 元素冲突。通过 customElements.define('tag-name', MyClass) 即可注册一个新的自定义元素。

浏览器并未提供直接枚举所有已注册自定义元素的 API。本工具通过以下方式检测：

• DOM 扫描：遍历文档中所有带连字符的标签名，使用 customElements.get(tagName) 验证注册状态。
• Shadow DOM 递归：深入遍历所有 Shadow Root 内部的自定义元素。
• define 拦截：包装 customElements.define() 方法，实时捕获后续注册。
• MutationObserver：监听 DOM 变化，自动发现新增的自定义元素实例。

根据 W3C 规范，自定义元素标签名必须包含至少一个连字符（-）。有效示例：my-element、x-button、app-header。无效示例：myelement、my_element。此外，标签名必须全部小写，不能使用自闭合标签语法（如 <my-element />），必须显式写出闭合标签。

observedAttributes 是自定义元素类的一个静态属性，返回一个字符串数组，指定需要监听变化的 HTML 属性。当这些属性发生变化时，浏览器会自动调用 attributeChangedCallback(name, oldVal, newVal) 生命周期方法。这避免了手动使用 MutationObserver 来监听属性变化，是更高效的方式。

自定义元素可以继承自 HTMLElement（通用元素），也可以继承特定内置元素如 HTMLButtonElement、HTMLInputElement、HTMLParagraphElement 等。继承内置元素时需要使用 { extends: 'button' } 选项，这种称为「自定义内置元素」。不过需要注意的是，Safari 浏览器对自定义内置元素的支持有限。

Shadow DOM 和自定义元素是 Web Components 的两个独立但互补的标准。自定义元素定义标签行为，Shadow DOM 提供样式和结构封装。一个自定义元素可以选择使用 Shadow DOM（通过 this.attachShadow({mode: 'open'})）来隔离内部样式，也可以不使用。本工具会递归扫描 Shadow Root 内部的元素，确保不遗漏任何嵌套的自定义组件。

这通常有以下原因：

• 异步加载：自定义元素的 JS 文件尚未加载完成，标签已渲染但定义未注册。
• 加载失败：脚本加载出错，导致 customElements.define() 未执行。
• 拼写错误：HTML 中的标签名与 JS 中注册的名称不一致。
• 条件注册：某些组件根据条件动态注册，当前条件未满足。

未注册的自定义元素会被浏览器当作普通的 HTMLUnknownElement 处理，不会触发任何生命周期方法。

可以在应用初始化时包装 customElements.define 方法，记录所有注册行为。也可以使用 customElements.whenDefined('tag-name') 返回的 Promise 来检测特定元素的注册完成时间。对于性能监控，可以在自定义元素的构造函数和生命周期方法中加入性能标记（Performance API）。