Custom Elements 是一种 Web 标准，允许开发者创建自定义 HTML 标签和元素，并能够将它们封装成可复用和可维护的组件。这些组件可以直接在 HTML 中使用，并能够与其他组件和原生元素一同工作，使得开发者能够打造出具有专属性和个性化的 Web 组件。
设计 Custom Elements
Custom Elements 具有以下几个组成部分：
- 标签名称：指定组件的名称，需要符合 HTML 的标签命名规则，使用 dash-case 命名方式
- Shadow DOM：定义组件的 DOM 结构和样式封装，保证组件外部样式不会影响组件内部样式
- 自定义事件：组件内部可以定义自己的事件，使得外部代码可以监听并响应组件的事件
- JavaScript API：组件内部定义的 JavaScript 方法调用，可以直接在外部代码中使用
从设计上，Custom Elements 的核心是 Shadow DOM，它提供了一种让 Web 组件像原生应用一样工作的方式，组件开发者可以封装和保护自己的代码，而不会受到外部代码的影响。
创建 Custom Elements
创建 Custom Elements 有两种方式：继承 HTMLElement 或使用 document.registerElement() 方法。建议使用前者。
继承 HTMLElement
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- -- --- - ------------------- - -- --- - ---------------------- - -- --- - ---------------------------------- --------- --------- - -- --- - -展开代码
继承自 HTMLElement 的类会自动注册为一个自定义元素，并且可以重写一些生命周期方法。
- constructor：创建组件时被调用，用于初始化组件
- connectedCallback：当组件插入到 DOM 中时被调用
- disconnectedCallback：当组件从 DOM 中移除时被调用
- attributeChangedCallback：当组件属性发生变化时被调用，需要在 static observedAttributes 中定义需要观察的属性名
使用 document.registerElement() 方法
const MyElement = document.registerElement('my-element', { prototype: Object.create(HTMLElement.prototype, { // ... }) });
使用 document.registerElement() 方法可以手动注册一个自定义元素，第一个参数为标签名称，第二个参数为一个对象，包含 prototype 和 extends 等属性。
- prototype：传入一个原型对象，包含自定义元素的所有属性和方法
- extends：可选属性，指定自定义元素继承的元素，如 button 元素
示例代码
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ------------------- ----- ------ --- ------------------------- - - ------- ------ - ----------------- -------- ------ ----- ------- ----- -------------- ---- -------- --- ----- - ------------ - ----------------- ----- ------- -------- - -------- ------- -------------------- ----------- -- ----------- - -------------------------------------------- ---------------- - ---------------------------- - ------------------- - ------------------------------------- ------------------ - ---------------------- - ---------------------------------------- ------------------ - ------------- - ---------------------- ------------------------- - - ----------------------------------- -----------展开代码
这是一个简单的 Custom Elements 组件，它包含一个 button，点击后会触发一个自定义事件 my-click。
在 HTML 中使用这个组件：
<my-element></my-element> <script> const element = document.querySelector('my-element'); element.addEventListener('my-click', () => { console.log('clicked!'); }); </script>
通过以上方式，我们可以自定义一些 HTML 标签，令其拥有个性和专属。Custom Elements 组件的模板和样式被定义在 Shadow DOM 中，可以保护组件的样式和 DOM 结构，同时可以通过 JavaScript API 和自定义事件对外部进行开放。这种组件化的设计和开发方式可以为我们提供更好的代码复用性和维护性，助力我们减少代码量并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bd0e1aa231b2b7edf0c5a8
