Web Components 是一项新兴的 Web 技术，旨在提供一种标准化的创建可复用组件的方法。不同于其他框架和库，Web Components 并不依赖于任何特定的框架或库，而是按照一定的规范实现，可以在任何现代浏览器中使用。
其中一个关键概念就是自定义元素（Custom Elements），Web Components 中定义的组件都是自定义元素。而使用 ES6 语法创建自定义元素则是一种更加简洁、易于维护的方法。
什么是自定义元素？
所谓自定义元素，就是指我们可以创建一种名为 my-element 的自定义 HTML 标签，像这样：
<my-element></my-element>
它并不是 HTML 原生支持的标签，而是由我们自己创建的，用来承载自定义的组件的。
而这种自定义元素是由 Web Components 技术实现的，不同于普通的 HTML 标签，它可以拥有自己的属性和方法，并具有更高的可复用性和封装性，可以在不同的项目中重复使用。在 Web 开发中，使用自定义元素可以将复杂的 UI 和交互逻辑抽象成一个独立的组件进行开发，让代码更加易于维护。
使用 ES6 class 语法创建自定义元素
在 Web Components 中，创建自定义元素需要遵循一定的规范和 API，而使用 ES6 class 语法可以使这个过程更加简单明了。
首先，我们需要继承 HTMLElement 类，以创建自定义元素：
class MyElement extends HTMLElement {
}接下来，我们需要定义一些与自定义元素相关的方法和属性。其中，connectedCallback 方法会在自定义元素被添加到 DOM 中时触发，而 disconnectedCallback 方法则会在自定义元素从 DOM 中被移除时触发。还有一些其他的自定义元素生命周期方法，例如 attributeChangedCallback 会在某个属性被添加、移除或更改时触发。
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------------- -
--------------- ------- ------------
-
---------------------- -
--------------- ------- ---------------
-
-此外，我们也可以创建一些自定义的属性和方法，并在需要的时候进行调用，例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - ----------
-
--- ------ -
------ -----------
-
--- ----------- -
---------- - ------
--------------- ------- ---- ------- ---- -------
-
---------- -
--------------------- ------------
-
------------------- -
----------------
-
-在上面的代码中，我们创建了一个 _name 属性和两个与之相关的方法，其中 name 属性是一个 getter/setter 方法，在属性值改变时会触发回调函数，而 sayHello 方法会在 connectedCallback 回调函数中被调用。这样，我们就可以在自定义元素被添加到 DOM 中时，通过调用 sayHello 方法来向页面传递我们自己的逻辑。
最后，我们需要使用 window.customElements.define 方法将自定义元素注册到浏览器中：
window.customElements.define('my-element', MyElement);这样，我们就成功创建了一个名为 my-element 的自定义元素，并将其绑定到了一个实现了一些逻辑的类上。接下来，在 HTML 代码中就可以直接使用 <my-element> 标签了。
示例代码
下面，我们来看一个完整的示例：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
---------- - ----------
-
--- ------ -
------ -----------
-
--- ----------- -
---------- - ------
--------------- ------- ---- ------- ---- -------
-
---------- -
--------------------- ------------
-
------------------- -
----------------
-
-
------------------------------------------ -----------<my-element></my-element>
在浏览器控制台中，我们可以看到输出结果为：
Hello, Default
如果我们修改一下属性值：
document.querySelector('my-element').name = 'Web Components';此时，控制台就会输出：
My element name changed to Web Components
这就是使用 ES6 class 语法创建自定义元素的一个简单示例。希望本文对你理解 Web Components 技术有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67824ace935627c90000bc30
