Custom Elements 是 Web Components 技术的核心之一，通过使用 Custom Elements，可以创建自定义 HTML 元素，并且可以按照自己的想法给这些元素添加属性，方法和事件等。
为什么使用 Custom Elements？
HTML 元素虽然非常丰富，但是总有一些需求没有对应的 HTML 元素，这时候就需要使用 Custom Elements 来创建自定义元素。同时，Custom Elements 也可以增强现有的 HTML 元素，让它们变得更加强大和灵活。
如何定义 Custom Elements？
定义 Custom Elements 需要使用 customElements.define() 方法，该方法需要传入两个参数：
- 自定义元素名称
- 自定义元素类
自定义元素类必须继承自 HTMLElement，同时需要实现以下两个方法：
connectedCallback()：当元素首次被插入到文档 DOM 中时，会触发该方法。disconnectedCallback()：当元素从文档 DOM 中删除时，会触发该方法。
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------------- - ---------------------- -- --------- -- --- ------ - ---------------------- - ---------------------- -- ------------ ---- --- ------ - - ----------------------------------- -----------展开代码
定义好自定义元素后，在 HTML 中使用该元素时，只需要按照正常的 HTML 元素方式进行使用即可：
<my-element></my-element>自定义元素的属性和方法
自定义元素可以拥有自己的属性和方法，这些属性和方法可以在自定义元素类中进行定义。
属性
自定义元素的属性可以通过 attributeChangedCallback() 方法来监听属性值的变化。例如，我们可以给上面的 MyElement 添加一个 name 属性：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------ --- -------------------- - ------ --------- - ------------------- - ---------------------- -- --------- -- --- --- ---- ---- ------------------------------- - ---------------------- - ---------------------- -- ------------ ---- --- ------ - ---------------------------------- ------- ------- - -- --------- --- ------- - ---------------------- ---- ------- ---- --------- -- ------------ - - --- ------ - ------ -------------------------- - --- --------- - ------------------------- ----- - - ----------------------------------- -----------展开代码
使用自定义元素的方式和之前一样：
<my-element name="hello"></my-element>
方法
自定义元素的方法可以通过 prototype 来进行定义，例如给 MyElement 添加一个 sayHello() 方法：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------ --- -------------------- - ------ --------- - ------------------- - ---------------------- -- --------- -- --- --- ---- ---- ------------------------------- - ---------------------- - ---------------------- -- ------------ ---- --- ------ - ---------------------------------- ------- ------- - -- --------- --- ------- - ---------------------- ---- ------- ---- --------- -- ------------ - - --- ------ - ------ -------------------------- - --- --------- - ------------------------- ----- - ---------- - ------------------- -- ---- -- ------------------------------- - - ----------------------------------- -----------展开代码
使用自定义元素的方式，调用 sayHello() 方法：
const myElement = document.querySelector('my-element'); myElement.sayHello(); // log: Hello, my name is hello
最后
Custom Elements 是 Web Components 技术中非常重要的一部分，它为我们提供了一种简洁、灵活的方式来扩展和定制 HTML 元素。作为前端工程师，掌握 Custom Elements 技术有着重要的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b68cf3306f20b3a6287b19
