分享一份入门级别的 Custom Elements 教程-JavaScript中文网-JavaScript教程资源分享门户

Custom Element 是 Web Components 标准中最重要的一环，它让我们可以自定义 HTML 元素及其行为。在本篇文章中，我们将会共同探讨 Custom Element 的一些基础知识，并实现一个简单的 Custom Element 示例。

Custom Element 是什么

Custom Element 是由 Web Components 提供的一个 API，使用它可以创造出全新的 HTML 元素，并定义它们的样式和行为。也就是说，使用 Custom Element 首先需要定义一个元素，接下来则是在这个元素定义内部的 HTML 结构、样式以及响应的行为。这一切都在一个单独的、自定义的元素中内置，并可以被其他开发者所使用。

事实上，Custom Element 使得 HTML 的组件化变得更加有意义，也更加强大。我们可以通过 Custom Element 提供的接口，定制化自己的元素的行为和样式，并让它和其他开发者所编写的代码无缝地进行交互。简言之，Custom Element 可以帮助我们达成一个组件化、封装化的页面开发目标。

接下来，就让我们通过一个简单的例子来了解 Custom Element 的使用方法。

使用 Custom Element 创建元素

为了演示 Custom Element 的工作原理，我们将创建一个简单的计数器（counter）元素。这个元素将会有两个按钮，其中一个用于增加计数器值，而另一个用于减少计数器值。当计数器值被修改，元素的内容区域也会同时更新展示。下面就通过代码来实现。

.html

// javascriptcn.com 代码示例
<template id="counter-template">
  <style>
    .counter {
      display: block;
      padding: 8px;
      background-color: #f4f4f4;
    }
    .value {
      display: block;
      font-size: 24px;
      text-align: center;
      margin-bottom: 8px;
    }
    .controls {
      display: flex;
      justify-content: center;
    }
    button {
      margin: 0 4px;
      padding: 8px;
      background-color: #5b5b5b;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  </style>
  <div class="counter">
    <div class="value"></div>
    <div class="controls">
      <button id="subtract">-</button>
      <button id="increment">+</button>
    </div>
  </div>
</template>

<counter-element value="0"></counter-element>

我们通过 <template> 元素在文档中声明了一个模板，模板中包括了计数器元素所需要的 HTML 结构和样式。同时，在模板中也预留了一个 .value 元素来存储计数器当前的计数值。

接下来，我们就可以尝试绑定模板和 Custom Element 元素了。

.js

// javascriptcn.com 代码示例
class Counter extends HTMLElement {
  constructor() {
    super();

    const template = document.querySelector("#counter-template");
    const templateContent = template.content;

    this.attachShadow({ mode: "open" }).appendChild(
      templateContent.cloneNode(true)
    );
    this.counterValue = 0;
  }

  connectedCallback() {
    this.shadowRoot.querySelector(".value").innerText = this.counterValue;
    this.shadowRoot
      .getElementById("increment")
      .addEventListener("click", () => this.increment());
    this.shadowRoot
      .getElementById("subtract")
      .addEventListener("click", () => this.subtract());
  }

  increment() {
    this.counterValue += 1;
    this.updateValue(this.counterValue);
  }

  subtract() {
    this.counterValue -= 1;
    this.updateValue(this.counterValue);
  }

  updateValue(newValue) {
    const valueElement = this.shadowRoot.querySelector(".value");
    valueElement.innerText = newValue;
  }
}

window.customElements.define("counter-element", Counter);

如上，我们先创建了 Counter 类，用于处理计数器元素的创建和事件绑定逻辑。在constructor中，我们通过引用先前定义的模板，创建了一个 shadow DOM 并将其附加到元素内部，从而创建了 Custom Element 元素 Counter 。

在 connectedCallback 方法中，我们处理了元素创建和连接到文档的逻辑。我们找到了当前的 .value 元素并将其设置为元素的值 this.counterValue。此外，我们还定义了两个按钮的事件（用于增加和减少计数器的值），并通过当前元素的实例为其分别绑定了事件回调函数 increment 和 subtract。

对于 increment 和 subtract 方法，它们分别用于相应按钮的事件处理逻辑，改变计数器值并通过与之相对应的 this.updateValue() 方法将新值更新到 .value 元素的内容之中。

最后，我们用 window.customElements.define 将自定义元素 Counter 定义为当前文档的 Custom Element 元素counter-element。

现在我们再次运行这个代码，就会得到一个可供使用的计数器元素，我们可以通过其自定义属性 value 来设置计数器的最初值：

总结

Custom Element 可以帮助我们创造出属于我们自己的 HTML 元素，它让我们能够更加灵活地精准定制 UI 界面，并且让这一过程更加便捷、封装化。虽然 Custom Element 看上去比较难懂，但是，只要大胆尝试并多练习就能很快体会到其强大之处。我希望这篇文章能够帮助到初学者理解 Custom Element 的基础知识，并通过示例代码的实践，自己也能够完成一个自定义的 UI 组件，这样才能体会 Web 开发的魅力和乐趣。

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