UD5工具箱
常见问题解答
什么是自定义元素？
自定义元素是 Web Components 技术体系中的核心概念，它允许开发者使用 JavaScript 创建全新的、具有自定义行为的 HTML 元素。每个自定义元素都是一个 ES6 类，继承自 HTMLElement 或其他原生 HTML 元素接口。通过 customElements.define() 方法注册后，这个新元素就可以像 <div>、<span> 等原生元素一样在 HTML 中使用。自定义元素拥有完整的生命周期回调，开发者可以在元素创建、连接到 DOM、属性变化、断开连接等关键时刻执行自定义逻辑。
本工具使用了哪些检测方法？
本工具综合运用了四种检测策略来确保扫描结果的完整性和准确性。第一种是 DOM 扫描，通过 querySelectorAll('*') 遍历整个文档树，检查每个元素的标签名是否包含连字符，从而识别潜在的自定义元素。第二种是 Shadow DOM 递归扫描，对所有包含 shadowRoot 的元素递归进入其 Shadow Root 内部继续扫描，确保不遗漏封装在 Shadow DOM 中的组件。第三种是 define 拦截，通过包装原生的 customElements.define() 方法，在组件注册时自动记录注册信息。第四种是 MutationObserver，实时监听 DOM 变化，当新的元素被添加或移除时自动触发重新扫描。
自定义元素的命名有什么规范？
根据 Web Components 规范，自定义元素的标签名必须包含一个连字符（hyphen，即 -），这是为了与未来的 HTML 标准元素区分开来。例如，<my-component> 是合法的自定义元素名，而 <mycomponent> 则不合法。此外，标签名不能以数字开头，不能包含空格或特殊字符，不能以 "x-"、"x-"、"ng-" 等保留前缀开头（除非遵循相应的规范）。标签名不区分大小写，但在定义和使用时应保持一致的大小写约定。
observedAttributes 的作用是什么？
observedAttributes 是一个静态属性，返回一个字符串数组，列出了自定义元素需要监听变化的 HTML 属性名。当这些属性的值在外部被修改时（例如通过 setAttribute() 或直接在 HTML 中修改），浏览器会自动调用该元素的 attributeChangedCallback 回调函数。这个回调接收三个参数：属性名、旧值和新值。只有列在 observedAttributes 中的属性才会触发回调，这样可以避免不必要的性能开销。在本工具的扫描结果中，你可以看到每个已注册元素的 observedAttributes 列表，了解该组件对外暴露了哪些可配置的属性接口。
自定义内置元素和独立自定义元素有什么区别？
自定义内置元素（Customized Built-in Elements）通过 extends 机制继承现有的原生 HTML 元素，例如继承自 HTMLButtonElement、HTMLInputElement 等。这种方式创建的元素复用了原生元素的默认行为、语义和无障碍特性，同时可以扩展或覆盖特定的功能。在 HTML 中使用时需要添加 is 属性，如 <button is="my-button">。而独立自定义元素直接继承 HTMLElement，创建全新的元素类型，标签名必须包含连字符。独立自定义元素适用于全新的 UI 组件，自定义内置元素适用于增强现有 HTML 元素的功能。
Shadow DOM 和自定义元素有什么关系？
Shadow DOM 和自定义元素是 Web Components 三大技术中的两个独立但经常配合使用的技术。自定义元素定义了组件的行为和逻辑，Shadow DOM 则提供了组件的样式和结构封装。一个自定义元素可以选择不使用 Shadow DOM，直接将其内容渲染到常规 DOM 树中，但这样就无法实现样式隔离。使用 Shadow DOM 后，组件内部的样式不会泄漏到外部，外部的样式也不会影响组件内部。在本工具中，Shadow DOM 内的自定义元素会被单独统计，因为它们的扫描需要递归进入 Shadow Root。工具会同时检测 Shadow Root 内部的元素实例和组件定义。
为什么有些元素显示为未注册状态？
如果一个标签名中包含连字符的元素在扫描时显示为未注册状态，可能有以下几种原因：第一，该元素所在的组件库采用了异步加载策略，组件的注册代码尚未执行完成，此时 customElements.get() 返回 undefined。第二，组件库加载失败，可能是网络请求超时、JavaScript 文件 404 错误或脚本执行报错导致注册代码未能执行。第三，标签名拼写错误，开发者在 HTML 中使用的标签名与代码中注册的名称不一致。第四，组件采用了条件注册策略，只在特定条件下（如特定 URL 路由、用户权限或设备类型）才会注册。第五，组件库的打包配置问题，注册代码被分割到了异步 chunk 中且未被正确加载。
如何在生产环境中监控自定义元素？
在生产环境中监控自定义元素可以采用以下策略：首先，通过包装 customElements.define() 方法来记录所有注册的组件信息，包括注册时间、组件名称和构造函数。其次，使用 customElements.whenDefined() 方法可以异步等待某个组件被注册，这对于需要确保组件已加载的场景非常有用。第三，结合 Performance API（如 performance.mark() 和 performance.measure()）可以测量组件注册和渲染的性能指标。第四，通过 PerformanceObserver 监听 element 类型的性能条目，可以获取自定义元素的构建和连接性能数据。这些监控手段可以帮助团队在生产环境中及时发现组件加载异常和性能问题。