Web Componentsを触ってみた ~後編~

いなば

2018.01.14

こんにちは、フロントエンドエンジニアのいなばです。前回は、Custom ElementsのHTMLテンプレートを定義できる機能とShadow DOMを実際に動かしてみました。

今回は、Web Componentsを構成する要素のひとつであるCustom Elementsのライフサイクルフックを、簡単なデモを通して体験してみようと思います。

ライフサイクルフックの定義
おまけ
おわりに
参考

ライフサイクルフックの定義

Custom Elementsは、昨今のJavaScriptフレームワークと同じように、ライフサイクルフックを持っているようです。

constructor
connectedCallback
disconnectedCallback
attributeChangedCallback
adoptedCallback

簡単なデモとしてborder-radiusのジェネレーターもどきを作ってみたので、そちらで具体的な挙動を順番に確かめていくことにしましょう。

constructor

Class構文と同様に初期化のタイミングで呼ばれます。Documentに定義したカスタム要素を追加しなくても、new 演算子でインスタンスを作成したタイミングでは呼ばれるようです。

デモではshadowRootのHTMLの初期化と今回のカスタム要素で定義したメソッド内でのthisの解決を行なっています。

constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    });
    this.render();
    this.updateRadius = this.updateRadius.bind(this);
  }

connectedCallbackとdisconnectedCallback

connectedCallbackはカスタム要素がDocumentに追加されたタイミングで発火します。 JavaScriptフレームワークに慣れしんでいる人向けに例えるならば、AngularならngOnInitとngOnDestroy、Vue.jsならmountedとdestroyedにそれぞれ相当するものと言えそうです。

デモでは、inputの変更を検知するためにaddEventListenerを呼んでいます。

connectedCallback() {
    this.shadowRoot.addEventListener('change', this.updateRadius);
  }

disconnectedCallbackは、カスタム要素がDocumentから削除されたタイミングで発火します。カスタム要素が削除されたあともイベントリスナーが残り続けないようにイベントの削除を行っています。

disconnectedCallback() {
    this.shadowRoot.removeEventListener('change', this.updateRadius);
  }

attributeChangedCallback

カスタム要素のobservedAttributesで指定した属性が、追加、削除、更新、または置換されたときに発火します。

デモでは、レンジバーの変更時にvalueをradius属性に反映、属性の値が更新されたことによりattributeChangedCallbackが呼ばれ、結果HTMLの再描画を行っています。

// 監視する属性を指定
  static get observedAttributes() {
    return ['radius'];
  }

  get radius() {
    return this.getAttribute('radius');
  }

  set radius(val) {
    this.setAttribute('radius', val);
  }
  /* 省略 */
  connectedCallback() {
    this.shadowRoot.addEventListener('input', this.updateRadius);
  }

  disconnectedCallback() {
    this.shadowRoot.removeEventListener('input', this.updateRadius);
  }
  
  attributeChangedCallback(attrName, oldVal, newVal) {
    // shadowRootのHTMLを再描画する処理を呼ぶ
    this.render();
  }

  updateRadius(e) {
    this.radius = e.target.value;
  }