UD5工具箱
核心概念与术语详解
自定义元素（Custom Elements）
自定义元素是 Web Components 技术的核心组成部分，允许开发者用 JavaScript 创建全新的 HTML 元素。每个自定义元素必须是一个 ES6 类，继承自 HTMLElement 或其他 HTML 元素接口。通过调用 customElements.define('tag-name', ClassName) 方法将类与标签名关联，之后就可以像使用原生 HTML 元素一样在页面中使用这个自定义标签。自定义元素拥有完整的生命周期回调，包括 constructor、connectedCallback、disconnectedCallback、attributeChangedCallback 和 adoptedCallback。
Shadow DOM
Shadow DOM 是 Web Components 的另一项核心技术，它为元素提供了一种封装 DOM 和样式的机制。通过调用 element.attachShadow({mode: 'open'}) 或 {mode: 'closed'} 可以为元素创建一个 Shadow Root。Shadow Root 内部的 DOM 树对外部是不可见的（open 模式下可通过 element.shadowRoot 访问），外部的 CSS 规则也不会影响 Shadow Root 内部的样式。这种封装机制确保了组件的样式和行为不会与页面其他部分产生冲突。
HTML Template
<template> 和 <slot> 标签是 Web Components 中用于定义组件结构和内容分发的机制。<template> 标签中的内容不会被立即渲染，也不会触发脚本执行或图片加载，直到通过 JavaScript 克隆并插入到 DOM 中。<slot> 标签则定义了组件的插槽，允许外部内容注入到组件的特定位置。命名插槽（named slot）允许更精细的内容分发控制。
customElements.define()
这是 CustomElementRegistry 对象上的核心方法，用于将一个自定义元素类与一个标签名进行关联注册。方法接受三个参数：标签名（必须包含连字符）、构造函数类以及可选的配置对象。配置对象中可以指定 extends 属性来创建自定义内置元素。一旦注册成功，该标签名就不能再被重复注册，否则会抛出 DOMException。
自定义内置元素（Customized Built-in Elements）
与独立自定义元素不同，自定义内置元素通过继承现有的 HTML 元素来扩展其功能。例如，可以创建一个继承自 HTMLButtonElement 的自定义按钮，增加自动提交或验证功能。注册时需要在 define() 方法的第三个参数中指定 extends 属性，并在 HTML 中使用 is 属性来标识。这种方式允许组件复用原生元素的语义和无障碍特性。
observedAttributes
这是一个静态属性，定义了自定义元素需要监听变化的 HTML 属性列表。只有列在这个数组中的属性发生变化时，才会触发 attributeChangedCallback 回调。这个机制允许组件对外部属性变化做出响应，实现数据驱动的更新。属性名必须使用小写形式，并且只能是字符串类型的属性。
Polyfill
由于 Web Components 的某些 API 在旧版浏览器中不受支持，Polyfill 库（如 @webcomponents/webcomponentsjs）提供了这些 API 的兼容实现。通过加载 Polyfill，可以在不支持 Web Components 的浏览器中使用自定义元素和 Shadow DOM 功能。Polyfill 通常通过 shim Shadow DOM 和注册表拦截来实现兼容性。
ElementInternals
ElementInternals API 允许自定义元素与浏览器的表单关联机制集成。通过调用 attachInternals() 方法，自定义元素可以参与表单验证、提交和无障碍访问。这是 Web Components 与原生表单深度集成的重要机制，使得自定义表单控件能够像原生控件一样工作。