你的前端框架要被 Web 组件取代了(2)

名称中的短划线（ - ）是必需的，以避免与任何原生 HTML 元素发生命名冲突。
不幸的是 MyElement 构造函数必须是一个 ES6 类，考虑到 Javascript 类（还）和传统的 OOP 类不太一样，这就容易让人头晕了。此外，如果允许使用对象，则还可以使用代理，从而为自定义元素启用简单数据绑定。但是，需要此限制才能启用原生 HTML 元素的扩展，并确保你的元素继承了整个 DOM API。
下面我们为自定义元素编写类：
class MyElement extends HTMLElement { constructor() { super(); } connectedCallback() { // here the element has been inserted into the DOM }}
我们自定义元素的类只是一个常规的 JavaScript 类，它扩展了原生的 HTMLElement。除了它的构造函数之外，它还有一个名为 connectedCallback 的方法，当元素插入 DOM 树时调用该方法。你可以将其与 React 的 componentDidMount 方法做对比。
通常来说，设置组件应尽可能地延迟到 connectedCallback，因为只有这里你才能确保元素的所有属性和子元素都可用。一般而言，构造函数只能用来初始化状态和设置 Shadow DOM。
元素的构造函数 constructor 和 connectedCallback 之间的区别在于，在创建元素时调用构造函数（例如，通过调用 document.createElement），并在元素实际插入 DOM 时调用 connectedCallback，例如当文档声明它已被解析或已与 document.body.appendChild 一起添加时这样做。
你还可以通过调用 customElements.get(‘my-element’) 获取对其构造函数的引用来构造元素，前提是它已经在 customElements.define() 中注册。然后，你就可以使用 new element() 代替 document.createElement() 来实例化元素了：
customElements.define('my-element', class extends HTMLElement {...}); ... const el = customElements.get('my-element');const myElement = new el(); // same as document.createElement('my-element');document.body.appendChild(myElement);