前言
Custom Elements 是 Web Components 的一部分，它可以让开发者创建出自定义的 HTML 元素来。自定义元素可以拥有自己的生命周期和样式。在 Custom Elements 中，可以通过继承来创建自定义元素，使得代码复用和拓展变得非常简单，但其中还是存在一些坑点和需要注意的地方。
在本文中，我们将介绍 Custom Elements 的继承方式、如何避免相关坑点以及一些实用的例子。本文需要你具有一定的 Web 开发基础知识。
继承方式
Custom Elements 的继承方式类似于 JavaScript 中的类继承。使用 ES6 的 class 语法可以方便地实现。
----- ------------- ------- ----------- -
------------- -
--------
-- --------
-
------------------- -
-- ------------
-
---------------------- -
-- -----------
-
------------------------------ --------- --------- -
-- ---------
-
----------------- -
-- -------------------
-
-
--------------------------------------- ---------------在上面的例子中，我们创建了一个 CustomElement 元素，并继承了 HTMLElement。在 CustomElement 中，我们可以定义一些生命周期函数来控制元素的行为。在 connectedCallback 中，我们可以添加一些初始化的操作，如添加事件监听、设置元素的初始状态等。在 disconenetdCallback 中，我们可以移除事件监听、保存元素当前状态等。
避免坑点
小写
在创建 Custom Elements 时，customElements.define() 方法的第一个参数必须为字母小写的字符串。如果使用了大写字母，将会产生如下错误：
------------- ------ -- ------- -------- -- ------------------------ --- ------- ---- --------------- -- --- ------
破坏内置元素
在继承内置元素（如 div）时，要小心不要破坏其原有的行为。例如，假设我们在一个名为 MyDiv 的元素中添加了一个点击事件监听器。然而，当我们在 MyDiv 中放置一个按钮时，按钮点击事件也会被触发，并且 MyDiv 的点击事件不再被触发。这是因为事件冒泡的机制，在按钮被点击时会导致事件向上冒泡，并触发 MyDiv 的点击事件。
----- ----- ------- -------------- -
------------- -
--------
------------------------------ -- -- -
------------------ ----------
---
-
-
------------------------------- ------ - -------- ----- ---要避免这种情况发生，可以在 MyDiv 中监听子元素的事件，以控制事件的冒泡。
构造器中的 super() 调用
在继承时，除了在类的构造函数中使用 super() 初始化 this 对象之外，还要在其他生命周期函数中使用 super 调用基类的同名方法。否则，将会导致基类的生命周期函数不被调用。
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-- ---- ----- ------ ------------------- ----
---------------------------------
-
------------------------------ --------- --------- -
------------------------------------ --------- ----------
----------------------------------------
-
-
----------------------------------- -----------CSS
在自定义元素的样式中，最好使用 :host 选择器来控制本身而不是子元素。否则，子元素可能会继承样式并导致样式错误。
例如，下面的代码将导致样式错误：
----------- --- - ----------------- ---- -
因为自定义元素 MyElement 的 div 元素将继承 .my-element 元素的样式。要避免这种情况，可以使用 :host 选择器来直接控制自定义元素的样式。
----- - ----------------- ---- -
实用例子
数字输入框
下面是一个数字输入框的自定义元素示例。该示例重载了 input 元素的 onchange 事件，使其只允许输入数字。
----- ----------- ------- ---------------- -
------------- -
--------
--------- - ---------
-
------------------- -
------------------------------ -- -- -
---------- - ----------------------------- ----
---
-
-
------------------------------------- ------------ - -------- ------- ---自定义表格
下面是一个自定义表格的示例。该示例继承了 table 元素，并添加了一些自定义样式和行为。
----- ----------- ------- ---------------- -
------------- -
--------
-----------------------------------
-
------------------- -
--------------------------------------------- -- -
----------------------------- -- -- -
---------------------------------
---
---
-
-
------------------------------------- ------------ - -------- ------- ---结论
Custom Elements 可以让我们创建自定义元素来帮助我们快速构建 Web 应用程序。在使用 Custom Elements 时，我们需要注意继承方式以及其相关的坑点。本文提供了一些实用的例子供我们参考，希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6703c952d91dce0dc84ca05b