Custom Elements 是 Web Components 的一个重要组成部分，它可以让开发者创建自定义的 HTML 元素，并且可以自定义元素的行为和样式，这对开发组件化的 web 应用非常有用。
在本文中，我们将学习如何创建 Custom Elements 并进行属性传值，让我们开始吧！
什么是 Custom Elements
Custom Elements 是 HTML 的一项标准，它让开发者可以创建自己的 HTML 元素，包括元素的内容、属性和行为。通过 Custom Elements，我们可以像使用内置的 HTML 元素一样使用自定义的 HTML 元素，并且可以在元素上监听事件、添加样式、设置属性等。
Custom Elements 主要由两个 API 组成：customElements.define() 和 Element.attachShadow()。
customElements.define() 用于定义一个新的 Custom Element，它接受两个参数：元素名称和元素类定义。例如：
class MyElement extends HTMLElement {
constructor() {
super();
this.textContent = 'Hello, World!';
}
}
customElements.define('my-element', MyElement);上面的代码定义了一个名为 my-element 的 Custom Element，并指定它的类定义为 MyElement。
Element.attachShadow() 用于创建一个 Shadow DOM，Shadow DOM 是一种可以隔离 DOM 树的技术，它可以使我们更加轻松地创建自定义元素，并且可以防止 CSS 选择器和 JavaScript 全局变量之间的冲突。
在 Custom Elements 中，我们可以通过属性来传递信息，从而让元素拥有更加动态的行为。下面我们将学习如何在 Custom Element 中定义属性，并且通过属性传递值。
定义属性
我们可以使用 Element.define() 中的 observedAttributes 字段来定义元素支持的属性。例如：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ------------
-
------------- -
--------
------------------- ----- ------ ---
------------------------- - ----------
-
------------------------------ --------- --------- -
-- ----- --- ---------- -
---------------------------------------------- - ---------
-
-
-
----------------------------------- -----------在上面的代码中，我们定义了一个名为 message 的属性，并且在元素的构造函数中创建了一个 Shadow DOM。当属性值发生变化时，attributeChangedCallback() 方法会被调用，我们可以在该方法中更新元素的样式或内容。
传递属性值
在 HTML 中使用 Custom Element 时，我们可以通过标准 HTML 属性来传递值。例如：
<my-element message="Hello, World!"></my-element>
当页面加载时，浏览器会自动将 message 属性的值传递给 Custom Element，而 Custom Element 会自动调用 attributeChangedCallback() 方法来更新内容。
示例代码
下面的示例代码演示了如何创建一个 Custom Element 并在其中传递属性值：
-- -------------------- ---- -------
--------- -----
------
------
------------- ----------------
--------
----- --------- ------- ----------- -
------ --- -------------------- -
------ ------------
-
------------- -
--------
------------------- ----- ------ ---
------------------------- - ----------
-
------------------------------ --------- --------- -
-- ----- --- ---------- -
---------------------------------------------- - ---------
-
-
-
----------------------------------- -----------
---------
-------
------
----------- --------------- ---------------------
-------
-------结论
通过 Custom Elements，我们可以创建自定义 HTML 元素并通过属性传递信息，这使得开发者可以更加灵活地控制页面的样式和行为。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6709fe6ad91dce0dc87d99c6