Custom Elements

在自定义元素定义之前使用 js 创建的自定义元素需要调用 upgrade，插入文档中的不需要且会调用 constructor 和 connectedCallback

https://developers.google.com/web/fundamentals/web-components/best-practices

> Therefore redefining a custom element is disabled by the spec.

class Counter extends HTMLElement {
  x = 0;
  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }
  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }
  connectedCallback() { this.render(); }
  render() {
    this.textContent = this.x.toString();
  }
}
window.customElements.define('num-counter', Counter);

自定义元素分为"自主自定义元素"和"自定义内置元素"

生命时期：

connectedCallback：当 custom element 首次被插入文档DOM时，被调用。当使用 es6 modules(sync defer) 时可以在 constructor 中渲染 child element。
disconnectedCallback：当 custom element 从文档DOM中删除时，被调用。
adoptedCallback：当 custom element 被移动到新的文档时，被调用。
attributeChangedCallback: 当 custom element 增加、删除、修改自身属性时，被调用。(先要监听: static get observedAttributes() {return ['w', 'l']; }) // 注意 connect 之前也会被调用