什么是 Custom Elements
Custom Elements 是 Web Components 规范中的一部分，它可以让开发者定义自己的 HTML 元素，并且使用它们就像使用原生 HTML 元素一样。使用 Custom Elements 可以让我们更好地组织代码，提高代码的可复用性和可维护性。
继承原生 HTML 元素
Custom Elements 允许我们继承原生 HTML 元素，这意味着我们可以创建一个自定义元素，它继承了原生元素的所有功能，并且可以添加自己的功能。
继承原生元素的步骤
- 创建一个继承自原生元素的自定义元素类，并且在类的构造函数中调用 super() 方法。
class MyElement extends HTMLButtonElement {
constructor() {
super();
}
}- 使用 window.customElements.define() 方法将自定义元素注册到浏览器中。
window.customElements.define('my-element', MyElement, { extends: 'button' });注意，第三个参数 { extends: 'button' } 是告诉浏览器这个自定义元素继承自 button 元素。如果你想让自定义元素继承其他原生元素，只需要将 extends 的值改成对应的元素标签名即可。
- 在 HTML 中使用自定义元素。
<button is="my-element">Click me</button>
注意，我们使用了 is 属性来指定这个元素是我们自定义的元素，而不是原生的 button 元素。
继承原生元素的优势
继承原生元素可以让我们复用原生元素的样式和行为，并且可以添加自己的样式和行为。比如，我们可以创建一个继承自 button 元素的自定义元素，它可以有自己的样式和事件处理函数。
-- -------------------- ---- -------
----- -------- ------- ----------------- -
------------- -
--------
------------------------------ -- -- -
--------------------- -- ----------
---
-
-
----------------------------------------- --------- - -------- -------- ---<button is="my-button">Click me</button>
在这个例子中，我们创建了一个继承自 button 元素的自定义元素 MyButton，它添加了一个 click 事件处理函数。在 HTML 中使用这个自定义元素时，它会继承 button 元素的样式和行为，并且添加自己的事件处理函数。
继承原生元素的注意事项
在继承原生元素时，我们需要注意一些事项：
- 自定义元素必须继承自原生元素的子类，比如 HTMLButtonElement、HTMLInputElement 等。
- 自定义元素不能继承自 HTMLUnknownElement，因为它是一个占位符元素，没有任何实际功能。
- 自定义元素必须使用 is 属性来指定自己的元素类型。
总结
Custom Elements 是 Web Components 规范中的一部分，它可以让开发者定义自己的 HTML 元素，并且使用它们就像使用原生 HTML 元素一样。使用 Custom Elements 可以让我们更好地组织代码，提高代码的可复用性和可维护性。继承原生元素可以让我们复用原生元素的样式和行为，并且可以添加自己的样式和行为。在继承原生元素时，我们需要注意一些事项，比如自定义元素必须继承自原生元素的子类，不能继承自 HTMLUnknownElement，必须使用 is 属性来指定自己的元素类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d5e524add4f0e0ffd8540a