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

例如，如果组件中有一个 id=“container”的元素，并且每当观察到的属性禁用更改时你都需要将此元素设置为灰色背景，请在 constructor 中引用此元素，以便它在 attributeChangedCallback 中可用：
constructor() { this.container = this.shadowRoot.querySelector('#container');} attributeChangedCallback(attr, oldVal, newVal) { if(attr === 'disabled') { if(this.hasAttribute('disabled') { this.container.style.background = '#808080'; } else { this.container.style.background = '#ffffff'; } }}
如果你等到 connectedCallback 创建了 this.container 之后才引用，那么第一次调用 attributeChangedCallback 时它就不可用了。因此，尽管你应该尽可能地将组件的设置延迟到 connectedCallback，但在这里这是做不到的。
你也要明白你可以在使用 customElements.define() 注册之前就可以使用 Web 组件。当元素存在于 DOM 中或插入其中并且尚未被注册时，它将是一个 HTMLUnknownElement 的实例。浏览器会用这种方式处理陌生的 HTML 元素，你可以照常与它交互，但它不会有任何方法或默认的样式。
当它通过 customElements.define() 注册时，会通过类定义得到增强。此过程被称为升级。使用 customElements.whenDefined 升级元素时可以调用回调，前者在元素升级时会解析返回 Promise 对象：
customElements.whenDefined('my-element').then(() => { // my-element is now defined})
Web 组件的公共 API除了这些生命周期方法之外，你还可以在元素上定义可以从外部调用的方法，目前在使用 React 或 Angular 等框架定义元素时是不可能做到这一点的。例如，你可以定义一个名为 doSomething 的方法：
class MyElement extends HTMLElement { ... doSomething() { // do something in this method }}