自定义元素：基础导论

前端

2023-09-05 15:38:01

自定义元素，也称为 Web 组件，是一种将应用程序或网站封装在自定义标签中的方法。这允许您创建您自己的 HTML 元素，这些元素可以在您的应用程序中重复使用，从而提高代码的可读性、可维护性和可扩展性。

自定义元素如何工作

自定义元素由两个部分组成：

HTML 模板 ：这定义了自定义元素的结构和样式。
JavaScript 类 ：这为自定义元素提供了功能。

HTML 模板使用特殊的 <template> 标签定义。您可以在其中放置自定义元素的所有 HTML 和样式。

JavaScript 类使用 JavaScript 的 class 定义。您可以在其中放置自定义元素的所有功能。

如何创建自定义元素

要创建自定义元素，您需要遵循以下步骤：

创建一个 HTML 模板 ：使用特殊的 <template> 标签定义自定义元素的结构和样式。
创建一个 JavaScript 类 ：使用 JavaScript 的 class 关键字定义自定义元素的功能。
将 HTML 模板和 JavaScript 类注册到浏览器 ：使用 customElements.define() 方法将 HTML 模板和 JavaScript 类注册到浏览器。

在应用程序中使用自定义元素

要使用自定义元素，您只需在 HTML 中使用它们即可。自定义元素就像普通的 HTML 元素一样使用。

例如，以下代码创建一个名为 my-dialog 的自定义元素，它是一个简单的对话框：

<template id="my-dialog">
  <dialog>
    <button>Close</button>
  </dialog>
</template>

<script>
  class MyDialog extends HTMLElement {
    constructor() {
      super();

      this.attachShadow({mode: 'open'});

      const template = document.getElementById('my-dialog');
      this.shadowRoot.appendChild(template.content.cloneNode(true));

      this.shadowRoot.querySelector('button').addEventListener('click', () => {
        this.close();
      });
    }

    close() {
      this.remove();
    }
  }

  customElements.define('my-dialog', MyDialog);
</script>

<my-dialog></my-dialog>