自定义标签的前世今生及 Custom Elements 的应用场景-JavaScript中文网-JavaScript教程资源分享门户

自定义标签的前世今生及 Custom Elements 的应用场景

自从 HTML 诞生以来，人们一直在寻找着更加灵活的页面布局方式。在 Web 应用程序中，HTML 标记通常用于布局和排版。因此，HTML 的标记语言在 Web 开发中起着至关重要的作用。但是，HTML 标准提供的元素并不能满足所有的需求，例如某些自定义元素，开发者无法直接使用，需要通过 JavaScript 才能实现。因此，Web 开发者需要一个更加灵活的方法来定义自己的 HTML 元素，这时候是时候提到自定义标签了。

自定义标签允许 Web 开发者创建自己的标记，来满足更精细化的页面布局以及在开发 Web 组件时更灵活的组件构建方式。使用自定义标签可以把复杂的 HTML 结构转变为更易于管理和维护的代码，同时也大大提高了代码的可读性。

在此基础上，W3C 也提出了一套新的 Web 标准 API：Custom Elements。Custom Elements 使得开发者可以更加方便地创建自定义标签，并且这些自定义标签拥有和原生 HTML 元素一样的 DOM API，从而更加符合 Web 前端开发的习惯。

自定义标签的应用场景

自定义标签通过简化和增加 HTML 的元素，给 Web 开发者提供了一种相对简单的方法来定义自己的元素，以满足更具体的布局和功能需求。这种方法可以被应用于以下场景：

制作具有复杂用户界面的一个或多个小部件或 “widgets”，如自定义下拉框、自定义输入框等；
定制某个库或框架中缺少的 HTML 元素，例如某些基于 Vue、React 等前端框架或库的组件；
在非常具体的 Web 应用程序中创建一致的样式和结构。

Custom Elements 的应用场景

嵌入式自定义元素是显而易见的，因为它们已经在 HTML 中被定义了。尽管如此，使用自定义元素来定义一个嵌入式组件时，还需要一些 JavaScript 来处理 HTML 解析和元素的初始化流程，Custom Elements API 就这样应运而生。

使用 Custom Elements，开发者可以通过 JavaScript 脚本来定义他们自己的组件，在不同平台下，这个 API 可以帮助开发者设计出许多不同种类的组件。

下面是一个自定义元素的示例：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>custom-element</title>
</head>
<body>
  <custom-element></custom-element>

  <template id="customElement">
    <!-- 自定义元素的 HTML 结构 -->
    <h1>Hello World!</h1>
  </template>

  <!-- 自定义元素注册 -->
  <script>
    class CustomElement extends HTMLElement {
      constructor() {
        super();
        const template = document.getElementById('customElement');
        const clone = template.content.cloneNode(true);
        this.attachShadow({ mode: 'open' }).appendChild(clone);
      }
    }
    customElements.define('custom-element', CustomElement);
  </script>
</body>
</html>

在这个例子中，我们使用了新的 HTML5 元素：<custom-element>。在这个元素定义中，我们将其实现为 CustomElement 类。在它的 constructor 中，我们使用了 attachShadow() API 创建了它的 Shadow DOM，并利用 appendChild() 添加了 element 中的内容。

最后，我们使用 customElements.define() API 注册了这个自定义元素。当你的浏览器遇到一个<custom-element>这样的元素时，它将会用 CustomElement 类来初始化这个元素。

自定义元素的生命周期

在 Custom Elements 中，每个自定义元素都是一个对象，它依赖于原生 DOM 元素，这些元素有一个特定的生命周期。当一个自定义元素被创建时，它会经历以下生命周期阶段：

获得constructor：constructor()用来初始化元素，并为其创建一个 Shadow DOM，它只会在元素第一次被创建时被调用。
获得connectedCallback：connectedCallback()在自定义元素插入到 DOM 中时被调用。
获得disconnectedCallback：disconnectedCallback()在自定义元素从 DOM 中移除时被调用。
获得attributeChangedCallback：attributeChangedCallback()在自定义元素某个属性的值发生变化时被调用。

使用这些生命周期函数，开发者可以在组件生命周期的各个阶段来执行特定的操作。

自定义元素的注意点

使用自定义元素，需要注意以下几个点：

自定义元素名必须为连字符形式（kebab-case），不能使用驼峰式（camelCase）或带下划线的形式（snake_case）。
自定义元素必须以 CustomElementRegistry.define() 手动注册才能使用，否则浏览器无法正常解析它们。
父级元素上存在 style 标签（无论内联还是外链），不会对 Shadow DOM 中的自定义元素产生任何影响，需要利用 CSS 自定义属性来实现样式继承。

自定义标签和 Custom Elements 相结合，为我们提供了一个灵活的方式来管理页面内容。我们可以创建自己的组件，并将它们作为单个元素，让代码更加易于管理。使用生命周期方法，我们可以在组件生命周期的不同阶段执行特定的操作，同时，自定义标签还可以最大限度地利用浏览器提供的 API，让开发者可以自由编写符合自己想要的代码逻辑。

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

自定义标签的前世今生及 Custom Elements 的应用场景