介绍
前端开发人员经常需要在 Web 页面中自定义一些元素，以满足特定的需求。在原生 HTML 中，这些元素的属性和行为是由标准化的 HTML 元素规定的。然而，HTML 没有考虑到所有开发人员的需求。在这种情况下，开发人员需要将原生元素变为更加灵活的自定义元素。这就是 Custom Elements 的作用。
Custom Elements 是 Web Components API 的核心部分，它为开发人员提供了一种创建自定义元素的机制。可以基于 Custom Elements API 来创建一个非常高效、可维护并且可重用的 Web 组件。在本文中，我们将探讨如何使用 Custom Elements API 创建和修改自定义元素的属性。
创建自定义元素
首先，我们需要定义和注册一个自定义元素。自定义元素可以使用内置元素（如 div、span等）或者远程自定义元素（如 React 和 Angular 技术中的自定义元素）做基础。
以下是一个简单的例子来创建自定义元素 <my-element> ：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
-
------------------- -
-------------- - ---------- ------------
-
-
----------------------------------- -----------在上面的代码中，MyElement 继承自内置的 HTMLElement 类，通过自定义 connectedCallback 函数来提供元素的自定义行为。这个函数被浏览器自动调用，并且可以被用来将自定义的 HTML 元素挂载到文档中。
执行了 customElements.define('my-element', MyElement) 后，<my-element> 就成为我们自定义的元素，并且可以在 HTML 中像其他内置 HTML 元素一样使用。
属性修改
当我们定义一个自定义元素时，我们通常需要在元素实例中定义自己的属性。这些属性可以用来保存元素的状态和配置信息。在 Custom Elements API 中，我们可以使用 attributeChangedCallback 函数来响应属性变化。
以下是在自定义元素中定义属性和自定义响应函数的实例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- - ------ --------- -
------------- -
--------
---------- - ----------
-
--- ------ - ------ ----------- -
--- ----------- - ------------------------- ------- -
------------------- -
-------------- - ------ ---- -- -------------------
-
------------------------------ --------- --------- -
-- ----- --- ------- -
---------- - ---------
-
-
-
----------------------------------- -----------在上面的例子中，我们为自定义元素定义了一个 name 属性，当这个属性发生变化时，attributeChangedCallback 函数就会被调用。
通过调用 this.setAttribute 函数来设置属性值，attributeChangedCallback 函数中的 name、oldValue 和 newValue 参数就会传入对应的属性名称和新旧值。
在上述 attributeChangedCallback 函数中，我们通过 this._name = newValue 将新的 name 变量的值设置给类的私有变量 _name，从而使在元素内容中显示的 name 值得到更新。
结论
在本文中，我们探讨了如何使用 Custom Elements API 创建和修改自定义元素的属性。我们看到了如何使用这些技术来创建高度可重用和响应性能的 Web 组件。这些组件可以大幅度提高页面的性能和可维护性。
希望通过这篇文章可以让读者更加理解 Custom Elements 的基本概念和最佳实践，并能够使用 Custom Elements API 建立自己的自定义元素。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d6fa411e808aa268a4b8a