Custom Elements：生成高度可定制的元素
介绍
Custom Elements 是一个新的 Web API，它允许开发者定义并注册自定义元素，并通过自定义元素扩展 HTML 标准，实现高度可定制的元素。
Custom Elements API 允许开发人员使用 JavaScript 创建自定义标签并定义其行为。自定义元素可以定义自己代码、属性和方法，支持继承和扩展现有 HTML 元素，可以高度定制，提供更好的可读性和可维护性。
目标用户
Custom Elements 主要面向前端开发者。如果你希望在 HTML 标记语言中使用自定义的高级控件，通过自定义元素 API，您可以轻松实现它。
使用方法
定义自定义元素
以创建一个新的 <my-element> 元素为例:
class MyElement extends HTMLElement { constructor() { super(); } } customElements.define('my-element', MyElement);
上面的代码，我们首先通过定义一个构造函数来创建一个新的类。然后我们扩展了 HTMLElement 类，这是 Web API 中用于表示 HTML 元素的基本类。最后我们使用 customElements.define() 方法将新元素注册到自定义元素列表中。
创建自定义元素的属性
自定义元素可以包含任意的自定义属性，每个属性都会存储在 JavaScript 类实例上，用于表示元素的内部状态。
以创建一个带有自定义属性的 <my-element> 元素为例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------ --- -------------------- - ------ --------- - ------------- - -------- ---------- - --- - --- ------ - ------ ----------- - --- ----------- - ------------------------- ------- - ------------------------------ --------- --------- - -- ----- --- ------- - ---------- - --------- - - - ----------------------------------- -----------展开代码
上面的代码中，我们使用 observedAttributes 方法定义了监控的元素属性，这里监控了 name 属性。
在构造函数中，我们使用 this._name 定义了一个私有变量来存储元素的内部状态。
接下来，我们定义了一个 getter/setter 函数，用于设置和读取元素的 name 属性。通过 setAttribute() 方法设置属性时，这个 name 属性将会存储在元素的属性上，attributeChangedCallback() 方法会被调用以保存新的属性值。
创建自定义元素的方法
除了属性，自定义元素还可以定义一些方法，这些方法通常用于处理元素的内部状态或响应用户输入。以创建一个回显用户输入的 <my-element> 元素为例：
-- -------------------- ---- ------- ----- --------- ------- ----------- - ------------- - -------- ---------- - --- ------------------- ----- ------ --- ------------------------- - - ------ ----------- ---------- -------------- ------- ---------------------- ---- ------------------ -- ----------- - ---------------------------------------- ------------ - ----------------------------------------- --------- - -------------------------------------- ----------------------------------- -------------------------- - ---------- - ---------- - ------------------ ---------------------- - ----------- - --- ------ - ------ ----------- - --- ----------- - ------------------------- ------- - ------------------------------ --------- --------- - -- ----- --- ------- - ---------- - --------- ---------------------- - ----------- - - - ----------------------------------- -----------展开代码
以上代码定义了一个自定义元素 MyElement，我们通过 attachShadow({mode: 'open'}) 方法创建了一个 Shadow DOM（影子 DOM），然后生成一个用户输入框和一个按钮。当用户单击按钮时，我们存储用户的输入并在输出区域打印。
注意这里使用了.bind(this)将函数绑定到组件实例，以正确处理 this 指向。
总结
Custom Elements API 是开发自定义 HTML 元素的强大工具。使用 Custom Elements API，您可以创建高度可定制的元素，从而简化 HTML 编写工作，使其更易于维护。
示例代码
<html> <head> <script type="module" src="my-element.js"></script> </head> <body> <my-element></my-element> </body> </html>
-- -------------------- ---- ------- -- ------------- ----- --------- ------- ----------- - ------ --- -------------------- - ------ --------- - ------------- - -------- ---------- - --- ------------------- ----- ------ --- ------------------------- - - ------ ----------- ---------- -------------- ------- ---------------------- ---- ------------------ -- ----------- - ---------------------------------------- ------------ - ----------------------------------------- --------- - -------------------------------------- ----------------------------------- -------------------------- - ---------- - ---------- - ------------------ ---------------------- - ----------- - --- ------ - ------ ----------- - --- ----------- - ------------------------- ------- - ------------------------------ --------- --------- - -- ----- --- ------- - ---------- - --------- ---------------------- - ----------- - - - ----------------------------------- -----------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a6f223add4f0e0fffc6406
