Custom Elements 中基础知识：HTML Import、ES Modules 和 template 元素-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 Web 开发中，组件化已经成为了一种非常流行的方式。在 React、Vue、Angular 等框架中，组件化被广泛应用。但是在 Web 标准中，组件化并没有得到很好的支持。Custom Elements 正是为了填补这个空白而生。

Custom Elements 是 Web Components 的一部分。它允许开发者定义自己的 HTML 标签，并且可以控制这些标签的行为。Custom Elements 提供了一个完整的生命周期，可以在标签创建、插入到 DOM 树、属性变更、被移除等不同的时刻进行控制。

在本文中，我们将介绍 Custom Elements 中的一些基础知识，包括 HTML Import、ES Modules 和 template 元素。

HTML Import

HTML Import 是一个用于加载 HTML 文件的标准。它允许我们在一个 HTML 文件中引入另一个 HTML 文件，并且可以在引入的 HTML 文件中使用其中定义的 Custom Elements。

HTML Import 的语法非常简单：

<link rel="import" href="path/to/your/html/file.html">

在加载 HTML 文件时，浏览器会自动解析其中的 <link> 标签，并且将引入的 HTML 文件作为一个独立的文档进行加载。在加载完成后，我们可以通过 document.currentScript.ownerDocument 来获取到引入的 HTML 文件的 DOM 对象。

下面是一个简单的示例代码：

// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Import</title>
    <link rel="import" href="./my-element.html">
  </head>
  <body>
    <my-element></my-element>
    <script>
      const template = document.currentScript.ownerDocument.querySelector('#my-template');
      const MyElement = customElements.define('my-element', class extends HTMLElement {
        constructor() {
          super();
          const shadowRoot = this.attachShadow({mode: 'open'});
          shadowRoot.appendChild(template.content.cloneNode(true));
        }
      });
    </script>
  </body>
</html>

// javascriptcn.com 代码示例
<!-- my-element.html -->
<template id="my-template">
  <style>
    :host {
      display: block;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
  <h1>Hello, World!</h1>
</template>

在上述代码中，我们通过 <link> 标签引入了 my-element.html 文件，并且在 index.html 中使用了 <my-element> 标签。在 JavaScript 中，我们通过 document.currentScript.ownerDocument 获取到了 my-element.html 的 DOM 对象，并且使用 template 元素来定义了 Custom Elements。

ES Modules

ES Modules 是 ECMAScript 2015 中引入的模块化系统。它允许我们将 JavaScript 代码拆分成多个模块，并且可以在模块中定义 Custom Elements。

ES Modules 的语法非常简单：

// javascriptcn.com 代码示例
// my-module.js
export const MyElement = customElements.define('my-element', class extends HTMLElement {
  constructor() {
    super();
    const shadowRoot = this.attachShadow({mode: 'open'});
    const template = document.querySelector('#my-template');
    shadowRoot.appendChild(template.content.cloneNode(true));
  }
});

// javascriptcn.com 代码示例
<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ES Modules</title>
  </head>
  <body>
    <my-element></my-element>
    <script type="module" src="./my-module.js"></script>
  </body>
</html>

在上述代码中，我们使用 export 关键字将 MyElement 导出，并且在 index.html 中使用了 <my-element> 标签。在 JavaScript 中，我们通过 import 关键字将 MyElement 导入，并且定义了 Custom Elements。

需要注意的是，在使用 ES Modules 时，我们需要在 <script> 标签中添加 type="module" 属性，以告诉浏览器这是一个模块化的 JavaScript 文件。

template 元素

template 元素是 HTML5 中新增的一个元素，它允许我们在 HTML 中定义模板，并且可以在 JavaScript 中动态地使用这些模板。在 Custom Elements 中，我们通常使用 template 元素来定义 Custom Elements 的模板。

template 元素的语法非常简单：

// javascriptcn.com 代码示例
<template id="my-template">
  <style>
    :host {
      display: block;
      border: 1px solid #ccc;
      padding: 20px;
    }
  </style>
  <h1>Hello, World!</h1>
</template>

在上述代码中，我们定义了一个 id 为 my-template 的 template 元素，并且在其中定义了 Custom Elements 的模板。在 JavaScript 中，我们可以通过 document.querySelector('#my-template') 来获取到这个模板，并且使用 template.content.cloneNode(true) 方法来克隆这个模板。

总结

在本文中，我们介绍了 Custom Elements 中的一些基础知识，包括 HTML Import、ES Modules 和 template 元素。这些知识对于我们开发 Custom Elements 非常重要，可以帮助我们更好地组织代码，并且提高代码的可复用性和可维护性。希望本文对你的学习和工作有所帮助。

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