Web Components 是 4 个原生 Web API 的集合。它们分别是：
你可能已经使用过 ES Modules 规范，它允许你创建带有 import 和 export 的 JavaScript 模块，并通过 <script type="module"> 加载到页面中。
Custom Elements 规范允许用户使用 JavaScript 定义自己的 HTML 元素。元素名称必须包含连字符（-），以便与原生浏览器元素区分开来。清空 rating-element. 文件，然后定义一个自定义元素类：
class RatingElement extends HTMLElement {}
customElements.define('rating-element', RatingElement); class RatingElement extends HTMLElement {}
customElements.define('rating-element', RatingElement); 通过将元素类与标签名关联来定义自定义元素。类必须继承 HTMLElement，标签名必须包含连字符（-），以便与原生浏览器元素区分开来。
自定义元素的名称是全局的。
由于 customElements.define 的作用域是全局的，你不能对同一个标签名调用它超过一次，即使给出的是相同的类定义。
在文档 body 中放置一个 <rating-element>，看看会渲染什么。
<body> <rating-element></rating-element></body> 查看输出，你会发现什么都没有渲染。这是正常的，因为你还没有告诉浏览器如何渲染这个元素。
你可以确认自定义元素定义是否成功：右键点击结果预览窗口，选择"检查"或"检查元素"，然后在控制台中调用以下表达式来检查 <rating-element> 的构造函数：
document.querySelector('rating-element').constructor 应该输出：
class RatingElement extends HTMLElement {}