Custom Elements 教程：解决使用过程中的疑难杂症

阅读时长 14 分钟读完

在前端开发中，我们常常需要创建一些自定义的 HTML 元素，以便更好地组织我们的代码和样式。Custom Elements 是一个非常有用的 Web API，它可以帮助我们创建自定义 HTML 元素，并且可以很容易地扩展已有的元素，同时还可以使用 Javascript 和 CSS 完全控制它们的行为。本文将介绍 Custom Elements 的基础知识、使用方法和常见问题解决方法。

笔记前置

如果您不知道 Markdown 怎么写，请参考Markdown 语法学习。本文需要您基本的HTML和CSS知识。

基础知识

Custom Elements API 的核心是 customElements.define 方法，它用于定义一个自定义元素。一个自定义元素需要指定一个标签名、一个构造函数和一些可选的选项。

例如，我们可以定义一个自定义元素 my-element，代码如下：

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

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

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

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

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

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

在上述例子中，我们使用模板 template 来定义自定义元素 MyElement 的 HTML 结构。通过 attachShadow 方法创建一个 Shadow DOM，将模板内容复制到 Shadow DOM 中，并附加到自定义元素上。

最后，我们使用 customElements.define 方法来定义自定义元素 MyElement。这会告诉浏览器，当我们使用 <my-element> 标签时，它应该创建一个新的 MyElement 实例。

使用方法

构造函数

我们可以通过自定义元素的构造函数来控制其行为。在构造函数中，我们可以添加子元素，添加事件监听器、甚至修改元素的样式。

例如，我们可以为自定义元素添加一个点击事件监听器来修改其文本内容：

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

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

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

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

在上面的例子中，我们为自定义元素添加了点击事件监听器，当用户点击该元素时，它的文本内容将被修改为 'Clicked!'。

生命周期

Custom Elements 还提供了一些生命周期方法，它们在自定义元素的生命周期中被调用。下面是一些常用的生命周期方法：

  • constructor()：构造函数，用于初始化和设置元素的一些属性。
  • connectedCallback()：元素被插入到文档时被调用，可以用来添加事件监听器和设置样式等。
  • disconnectedCallback()：元素被从文档中删除时被调用，可以用来清除事件监听器等。
  • attributeChangedCallback(name, oldValue, newValue)：当元素属性的值发生改变时被调用，可以用来更新元素的属性和样式。

例如，我们可以在 connectedCallback 方法中设置元素的样式：

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

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

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

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

在上述例子中，我们为自定义元素添加了 connectedCallback 方法，并在其中设置了元素的字体加粗和鼠标光标为手指。这使得用户可以更容易地发现该元素可点击。

属性

自定义元素可以有属性，这些属性可以使用 HTML 属性语法进行声明。当属性的值发生变化时，Custom Elements 会自动调用 attributeChangedCallback 方法。

例如，我们可以在 MyElement 中添加一个 message 属性：

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

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

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

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

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

在上述例子中，我们为自定义元素添加了一个 message 属性，并在构造函数中使用 getAttribute 方法获取该属性的值。

我们还需要在 MyElement 类中添加一个名为 observedAttributes 的静态属性，它应该返回一个字符串数组，包含所有需要观察的属性。在本例中，我们使用 ['message'] 来定义需要观察的属性。

最后，我们在 attributeChangedCallback 方法中添加了代码，以便在 message 属性的值发生变化时更新元素的文本内容。

扩展已有元素

除了创建全新的自定义元素之外，我们还可以扩展已有的 HTML 元素。这可以通过继承已有元素类并为其添加新属性和方法来实现。例如，我们可以扩展 button 元素来添加一个新的 message 属性：

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

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

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

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

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

在上述例子中，我们使用 class MyButton extends HTMLButtonElement 来扩展 HTMLButtonElement 类，然后为其添加一个新的 message 属性。

我们还需要在构造函数中使用 getAttribute 方法获取 message 属性的值，并在 connectedCallback 方法中设置 button 元素的文本内容。

最后，我们使用 customElements.define 方法来定义 my-button 元素，并通过 extends: 'button' 选项来将其扩展为 button 元素。这样，我们可以在原有的 button 元素上使用新的 message 属性。

常见问题解决方法

如何获取 Shadow DOM 中的元素？

在上述例子中，我们在 MyElement 的构造函数中使用 attachShadow 方法创建了一个 Shadow DOM，并将 template 中的内容复制到其中。

如果需要在 MyElement 中访问 Shadow DOM 中的元素，可以通过使用 this.shadowRoot.querySelector 方法来实现：

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

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

在上述例子中，我们在构造函数中使用 this.shadowRoot.querySelector('button') 方法获取 Shadow DOM 中的 button 元素，并将其保存在实例变量 this.button 中。

接下来，在 connectedCallback 方法中，我们使用 this.button.addEventListener 方法来添加点击事件监听器。当用户点击 button 元素时，其文本内容将被修改为 'Clicked!'。

如何为 Custom Elements 添加样式？

Custom Elements 中的样式可以使用 CSS 的 :host 伪类实现。:host 伪类用于匹配自定义元素本身，而不是其内部的 Shadow DOM。

例如，我们可以为 MyElement 添加如下样式：

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

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

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

在上述例子中，我们使用 my-element 选择器来匹配自定义元素本身，并为其设置一些基本样式。我们还可以使用 :hover 伪类来为自定义元素设置鼠标悬停效果。

另外，我们可以使用 my-element button 选择器来匹配 Shadow DOM 中的 button 元素，为其单独设置样式。

示例代码

下面是一个完整的 Custom Elements 示例代码，包括自定义元素的定义和使用：

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

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

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

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

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

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

在上述例子中，我们通过 template 元素定义了自定义元素 MyElement 的 HTML 结构，并使用 customElements.define 方法将其定义为 my-element 元素。

在 MyElement 的构造函数中，我们使用 attachShadow 方法创建了一个 Shadow DOM，并将 template 中的内容复制到其中。我们还在构造函数中使用 this.shadowRoot.querySelector('button') 方法获取了 Shadow DOM 中的 button 元素，并保存在实例变量 this.button 中。

在 connectedCallback 方法中，我们为 button 元素添加了点击事件监听器，并在其中将其文本内容修改为 'Clicked!'。

最后，我们在 HTML 页面中使用 <my-element> 标签来创建一个 MyElement 的实例，并在其中显示其内容。

总结

Custom Elements 是一个非常有用的 Web API，它可以帮助我们创建自定义 HTML 元素，并完全掌控其行为和样式。在本文中，我们介绍了 Custom Elements 的基础知识、使用方法和常见问题解决方法，并给出了一些示例代码。如果你希望进一步学习 Custom Elements，建议查看官方文档和示例代码，并实践一些简单的示例。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491d7ce48841e9894fd2446

纠错
反馈
相关推荐
精选内容