自定义 Web 组件的完全指南:使用 Custom Elements 创建可重用的元素

阅读时长 10 分钟读完

随着 Web 技术的发展,前端应用的复杂性不断增加,需要更加高效和可维护的方式来管理代码和 UI 组件。在这种情况下,自定义 Web 组件已成为一种流行的解决方案。

在本文中,我们将介绍如何使用 Custom Elements API 来创建可重用的 Web 组件。我们将深入探讨 Custom Elements 的特性、用法和最佳实践,并提供示例代码和指导意义。

Custom Elements 的基础概念

Custom Elements 是 Web Component 规范的一部分,它允许开发者自定义 HTML 元素,提供一种更加模块化和可扩展的方式来构建应用。Custom Elements API 定义了两个核心部分:定义和注册。

定义 Custom Element

定义 Custom Element 的方式很简单:继承 HTMLElement 和使用 window.customElements.define API 进行注册。比如,我们可以通过下面的代码定义一个名为 hello-world 的元素。

在这个示例中,我们定义了一个 HelloWorld 类,继承自 HTMLElement,然后使用 window.customElements.define API 进行注册,并将其名称设置为 "hello-world"。在元素被创建时,构造函数中的代码将会被执行,将 "Hello, World!" 添加为元素的内容。

注册 Custom Element

要注册 Custom Element,需要使用 window.customElements.define() 方法,并指定元素名称和元素构造函数。如果元素名称已被注册,将会抛出错误。

Custom Elements 的特性

在定义 Custom Element 之后,我们可以使用其提供的特性来定制化元素。Custom Element API 定义了如下属性:

  • extends:指定元素从哪种 DOM 元素扩展而来。可以使用 constructor.extends 属性或直接传入 extends 选项。
  • observedAttributes:指定应该观察哪些属性的列表。在元素上使用 setAttribute() 或 removeAttribute() 方法修改时筛选指定属性的变化。
-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
  -

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

  ------------------------------ --------- --------- -
    ----------------------- ------- ------- ---- ----------- -- --------------
  -
-
  • connectedCallback:当元素首次连接到文档DOM树中触发钩子。典型用例为装载 Shadow DOM,注册事件监听器或设置计时器。
-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
  -

  ------------------- -
    -------------------- ----- -- --- ------
  -
-
  • disconnectedCallback:当元素从文档DOM树中移除时触发钩子。典型用例包括清除计时器,销毁引用或取消注册事件监听器。
-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
  -

  ---------------------- -
    -------------------- ------- ---- --- ------
  -
-
  • adoptedCallback:当元素被移动到不同的文档时触发钩子。典型用例包括克隆模版和重新初始化子组件。
-- -------------------- ---- -------
----- --------- ------- ----------- -
  ------------- -
    --------
  -

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

自定义 Web 组件的最佳实践

创建自定义 Web 组件时,有一些最佳实践可供参考:

  • 包装原始元素:如果您计划扩展现有的 DOM 元素,可以使用 extends 属性将其包装在自定义元素中。这允许您继承现有的行为,并以更模块化的方式构建应用程序。您可以在自定义元素的构造函数中调用 super(),以确保父类功能得到继承。例如:
  • 使用 Shadow DOM:Shadow DOM 为自定义元素提供了一种隔绝样式和元素的新方式。它允许您为自定义元素创建一个私有 DOM,其中的样式和事件不会泄漏到全局作用域。在您的自定义元素中使用 Shadow DOM 时,可以使用 :host 伪类样式访问自定义元素本身,而不是元素中的任何子元素。例如:
-- -------------------- ---- -------
----- ---------- ------- ----------- -
  ------------- -
    --------
    ------------------- ----- ------ ---
    ------------------------- - -
      -------
        ----- - ------ ---- -
      --------
      ------------ -------------
    --
  -
-

------------------------------------ ------------
  • 使用模板:模板提供一种将标记和 JavaScript 分离的方式,使应用程序更易于维护。将您的模板添加到自定义元素的 shadow DOM 中,以便您可以同时更新组件的样式和结构。例如:
-- -------------------- ---- -------
----- -------- - -----------------------------------
------------------ - -
  -------
    ----- - ------ ---- -
  --------
  ------------ -------------
--

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

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

自定义 Web 组件的示例代码

在下面的代码片段中,我们将结合前文介绍的 API 和最佳实践创建一个自定义 Web 组件,该组件可以在鼠标悬停时显示一条提示文本。我们将使用外部系统图标作为自定义元素的子元素,并使用 Shadow DOM 在元素中包装样式和行为。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

总结

Custom Elements API 为开发者提供了一种创建可重用的 Web 组件的方式。本文介绍了 Custom Elements 的特性、用法和最佳实践,并提供了示例代码和指导意义。如果您正在开发 Web 应用程序,并希望获得更好的模块化和可维护性,请考虑使用 Custom Elements。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/65b1d24dadd4f0e0ffb051f1

纠错
反馈