web components 前面我们已经介绍过，这一期我们就来讲一讲具体用法和这其中的关键只是点：

1 基本使用

如果我们想实现一个封装的原生组件，那就离不开使用js去封装，这里主要就是基于HTMLElement这个类，去创建创建一个子类，然后使用customElements.define去页面中注册这个组件。

javascript">export class dialog extends HTMLElement {constructor() {super(); // 必须首先调用 super()// 正确的做法if (!this.shadowRoot) {this.attachShadow({ mode: "open" }); // 或者 'closed' 根据需求}// 创建并添加样式到影子DOM中const style = document.createElement("style");style.textContent = `dialog {padding: 0;width: 300px;height: 200px;border: 1px solid #888;}dialog::backdrop {background: rgba(0,0,0,0.5);