在现代 Web 开发中，组件化已经成为了一种流行的开发模式。通过将一个页面拆分成多个组件，我们可以更加灵活和高效地实现复杂的应用程序。Custom Elements 是 Web Components 规范中的一部分，它提供了一种自定义 HTML 元素的方式，使我们可以创建自己的 Web 组件。在本文中，我们将学习如何在 polyfilled 环境中使用继承来扩展 Custom Elements。
Custom Elements 简介
Custom Elements 是 Web Components 规范的一部分，它提供了一种自定义 HTML 元素的方式。使用 Custom Elements，我们可以创建自己的 Web 组件，这些组件可以像原生 HTML 元素一样被使用。
Custom Elements 定义了一个类，用来表示自定义元素，这个类需要继承自 HTMLElement。这个类可以包含一个 constructor 函数和一些生命周期钩子函数，用来定义自定义元素的行为和状态。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-- -----
-
------------------- -
-- -----------
-
---------------------- -
-- ------------
-
---------------------------------- ------- ------- -
-- -------------
-
----------------- -
-- -------------
-
-继承 Custom Elements
如果我们需要创建一个自定义元素，通常需要继承自 HTMLElement 类。在原生浏览器环境中，这是非常简单的：
class MyElement extends HTMLElement {
// ...
}
customElements.define('my-element', MyElement);但在早期的浏览器中，Custom Elements 并不被原生支持。为了在这些浏览器中使用 Custom Elements，我们需要使用 polyfilled 的实现，例如 Polymer 或 X-Tag。
在 polyfilled 环境中，我们不能直接对 HTMLElement 进行继承，因为它不是一个真正的类。相反，我们需要继承一个 polyfill 提供的类，例如 Polymer.Element。在 Polymer 中，我们可以这样定义一个新的 Custom Element：
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
// ...
}
customElements.define(MyElement.is, MyElement);使用继承扩展 Custom Elements
继承是一种非常强大的技术，它可以使我们更加灵活地扩展 Custom Elements。例如，我们可以创建一个基础 Custom Element 类，然后派生出具体的元素类。这样，我们可以在原始的 Custom Elements 类中定义通用的行为和功能，然后在子类中添加更多的功能。
-- -------------------- ---- ------- ----- ----------- ------- --------------- - -- ---- - ----- --------- ------- ----------- - ------ --- ---- - ------ ------------- - -- ---- - ----------------------------------- -----------
在这个例子中，BaseElement 类包含了一些通用的功能，例如事件处理和公共方法。MyElement 类继承了这个基础类，并添加了一些具体的功能。
结论
Custom Elements 是一种强大的技术，它使我们能够创建自己的 Web 组件。通过继承，我们可以更加灵活地扩展 Custom Elements，从而创建具有特定功能的元素。在 polyfilled 环境中，我们需要继承一个 polyfill 提供的类，例如 Polymer.Element。如果你正在使用 Custom Elements 开发 Web 组件，那么继承是你需要了解的重要技术之一。
参考
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- -------- ------------
------- ----------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
-------
------
-------------------------
--------
----- ----------- ------- --------------- -
------------ -
-------------------------------- -------------
-
-
----- --------- ------- ----------- -
------ --- ---- - ------ ------------- -
------------------- -
--------------------------
------------------------------
-
-
----------------------------------- -----------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fba1bb44713626015fbd83