利用 Custom Elements 实现新的 HTML 元素

阅读时长 10 分钟读完

什么是 Custom Elements?

在 Web 开发中,HTML 元素是组成页面的基本单位,它们可以让开发者简单地创建静态的页面结构,并通过 CSS 和 JavaScript 实现一些基础的交互。

但是,在某些情况下,标准的 HTML 元素不能满足开发者的需求,例如当我们想要创建一个具有特定功能的元素,或者想要在 Web 组件库中使用这个元素时,我们需要扩展 HTML 标准,创建一个“自定义元素”,这就是 Custom Elements。

Custom Elements 是 Web Components 标准的一部分,提供了一种简单的方式,让开发者创建自己的 HTML 元素,并从其他元素中继承和扩展现有的元素。

怎么创建 Custom Elements?

要创建一个自定义元素,我们需要继承 HTMLElement 类,然后定义它的行为和样式。下面是一个简单的示例,我们将创建一个名为 custom-button 的自定义元素,它可以显示一个按钮,并在点击时执行特定的操作:

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

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

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

在这个示例中,我们定义了一个名为 CustomButton 的类,它继承了 HTMLElement 类,并覆盖了它的构造函数。在构造函数中,我们调用了 super(),并使用 attachShadow() 方法创建了一个 shadow DOM,这是一种隔离的 DOM,可以使我们更好地控制元素的样式和行为。

接下来,我们使用 innerHTML 属性将样式和 HTML 结构添加到 shadow DOM 中,包括一个 button 元素,一个 slot 元素(用于将内容插入到按钮中),以及在构造函数中定义的按钮点击事件。

最后,我们使用 customElements.define() 方法将 CustomButton 注册为自定义元素,其中第一个参数是元素的名称,第二个参数是元素的构造函数。

在 HTML 中,我们只需要像使用其他元素一样使用 custom-button 元素,就可以在页面上显示我们创建的按钮了:

高级用法

除了基本的用法之外,Custom Elements 还支持许多高级用法,例如:

继承其他自定义元素

自定义元素可以继承其他自定义元素的属性和行为,这样可以更好地组织代码,并复用公共逻辑,例如:

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

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

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

在这个示例中,我们继承了 HTMLDivElement,并在 toggle() 方法中切换了 expanded 属性,并更新了元素的样式。

在使用自定义元素时,我们可以将 expandable-section 定义为 <div is="expandable-section">,这样就可以使用现有的 div 元素作为扩展点。

定义组合器

组合器是一种自定义元素的特性,它可以让我们通过将多个属性捆绑在一起,简化开发和使用过程。例如:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在这个示例中,我们定义了一个 Counter 元素和一个 BoxCounter 元素,并将它们的逻辑和样式分离开来,使它们更易于定制和扩展。

Counter 元素定义了一个 value 属性,和用于修改和显示值的两个按钮,同时,我们也实现了 attributeChangedCallback(),以便在属性值发生变化时更新元素的内容。

BoxCounter 元素继承了 Counter 元素,并添加了 widthheight 两个属性,同时,我们也定义了一个 observedAttributes 属性,用于指定需要观察的属性列表。

最后,我们使用 customElements.define() 方法将它们都注册为自定义元素,并将 BoxCounter 定义为 <div is="box-counter">,这样就可以使用现有的 div 元素作为扩展点。

总结

通过 Custom Elements,我们可以创建自己的 HTML 元素,扩展和定制现有的元素,并在 Web 组件开发中更好地组织和复用代码。同时,它也为我们提供了许多高级用法,例如继承其他自定义元素和定义组合器,使得开发更加灵活和高效。

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

纠错
反馈