如何创建 Custom Elements 并进行属性传值-JavaScript中文网-JavaScript教程资源分享门户

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，它接受两个参数：元素名称和元素类定义。例如：

----- --------- ------- ----------- -
  ------------- -
    --------
    ---------------- - ------- --------
  -
-

----------------------------------- -----------

上面的代码定义了一个名为 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 属性来传递值。例如：

----------- --------------- ---------------------

当页面加载时，浏览器会自动将 message 属性的值传递给 Custom Element，而 Custom Element 会自动调用 attributeChangedCallback() 方法来更新内容。

示例代码

下面的示例代码演示了如何创建一个 Custom Element 并在其中传递属性值：

--------- -----
------
  ------
    ------------- ----------------
    --------
      ----- --------- ------- ----------- -
        ------ --- -------------------- -
          ------ ------------
        -

        ------------- -
          --------
          ------------------- ----- ------ ---
          ------------------------- - ----------
        -

        ------------------------------ --------- --------- -
          -- ----- --- ---------- -
            ---------------------------------------------- - ---------
          -
        -
      -

      ----------------------------------- -----------
    ---------
  -------
  ------
    ----------- --------------- ---------------------
  -------
-------

结论

通过 Custom Elements，我们可以创建自定义 HTML 元素并通过属性传递信息，这使得开发者可以更加灵活地控制页面的样式和行为。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6709fe6ad91dce0dc87d99c6