借助自定义元素，网站开发者可以定义新的 HTML 标记、扩展现有标记，以及创建可重复使用的 Web 组件。
借助自定义元素，Web 开发者可以创建新的 HTML 标记、增强现有 HTML 标记，或扩展其他开发者编写的组件。该 API 是网页组件的基础。它提供了一种基于 Web 标准的方法，只需使用纯 JS/HTML/CSS 即可创建可重复使用的组件。这样一来，应用中的代码量会减少，代码会更加模块化，并且重复使用率会提高。
简介
浏览器为我们提供了一个非常棒的 Web 应用结构工具。它叫做 HTML。您可能听说过！它是声明式的、可移植的、受良好支持的，并且易于使用。虽然 HTML 非常强大，但其词汇和可扩展性有限。HTML 活跃标准一直缺少一种方法来自动将 JS 行为与标记关联起来，但现在情况已然不同。
自定义元素是使 HTML 现代化、填补缺失部分以及将结构与行为捆绑在一起的答案。如果 HTML 无法解决问题，我们可以创建一个可以解决问题的自定义元素。自定义元素可向浏览器传授新技巧，同时保留 HTML 的优势。
定义新元素
如需定义新的 HTML 元素，我们需要 JavaScript 的强大功能！
customElements 全局变量用于定义自定义元素并告知浏览器新标记。使用您要创建的标记名称和扩展基本 HTMLElement 的 JavaScript class 调用 customElements.define()。
示例 - 定义移动抽屉式面板 <app-drawer>：
class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);
// Or use an anonymous class if you don't want a named constructor in current scope.
window.customElements.define('app-drawer', class extends HTMLElement {...});
用法示例：
<app-drawer></app-drawer>
请务必注意，使用自定义元素与使用 <div> 或任何其他元素没有区别。您可以在网页上声明实例、在 JavaScript 中动态创建实例、附加事件监听器等。请继续阅读，了解更多示例。
定义元素的 JavaScript API
自定义元素的功能是使用扩展了 HTMLElement 的 ES2015 class 定义的。扩展 HTMLElement 可确保自定义元素继承整个 DOM API，这意味着您添加到该类中的任何属性/方法都会成为该元素的 DOM 接口的一部分。本质上，使用该类为您的代码创建一个公共 JavaScript API。