まぁ、つまらないものですが

エンジニニャーの気ままな技術ブログ、日々のログを残してゆきます。

自分なりにCustomElementsをまとめてみる

iPad Pro(9.7 inc) を買っちゃった godanです。 いろいろとできて感動してるんですが、個人的にはAdobeのアプリの完成度が高すぎてびっくりしてます

カスタムエレメントとは

カスタムエレメントとはweb Componentに含まれるAPI使用の一つです。
最近のモダン Webなサイトを見るとdivの塊です。 それだけ見るととても人間 がかけるような構造にはなっていません。
それはそのはずです。実際には独自に定義されているHTMLを定義してコーディングされています。
その独自定義をするためのAPI群がWeb Componentと呼ばれている仕様です。

WebComponetと呼ばれる仕様群は4つの仕様に別れています。

  • Custom Elements
  • HTML Templates
  • Shadow DOM
  • HTML Imports

また4つの仕様はそれぞれ独立していた単体でも仕様可能になっています。

今回はそのなかのcustom elementに注目して見ます

Custom Elements

Custom Elementsは独自にHTMLタグを作成するための機能です。
またWebのライフサイクルごとにどのような振る舞いをするのかを実装することができます。

今回は以下のサンプルコードを使用してchoromeの開発者モードのコンソールを通じて操作してライフサイクルの様子を観察してみます。

class originaTag extends HTMLElement {
    // 変更を取得する属性の名前を書いておく
    static get observedAttributes() {return ['name']; }

    constructor() {
    // HTMLElement Classのコンスタントを実行
    super();
    }

    connectedCallback(){
    // 要素が挿入されたときに実行されます
    // このタイミングでシャドーDOMを呼び出します
        console.log('make!')
    }

    disconnectedCallback(){
        // 要素が削除された時に呼ばれます
        console.log('remove!')
    }

    attributeChangedCallback(attributeName, oldValue, newValue, namespace){
        // 要素の属性が変更された時に呼ばれます
        console.log('chenge attribute!')

    }

    adoptedCallback(){
        // ドキュメントが変わったとき  (ownerDocumentが変更された時に)呼ばれます
        console.log('change ownerDocument!')
    }
}

// Define the new element
customElements.define('original-tag', originaTag);

chorome経由で表示したとき

まず 普通にhtmlファイルを開いてみます。
コンソールを見ると「make!」がすでに出ています。 HTMLを描写時にconnectedCallbackが呼ばれて処理されているのがわかります。 f:id:gakusei200709:20180709002118p:plain f:id:gakusei200709:20180709002134p:plain

開発者モードのElementsのウィンドウがらタグを消す。

こんどはElementsタブでoriginal-tagを消してみます。選択してDeleteを押すと消えます。
消したあとにコンソールを見てみると「Remove!」が表示されていますね。 消す時にdisconnectedCallbackが呼ばれているのもここで確認することができました。 f:id:gakusei200709:20180709002152p:plain

属性を変更してみる

またページをリロードしてElementsタグからHTMLを編集します。
今度はタグの属性値を足してみます。 タグにname属性を足します。
足すとコンソールに「chenge attribute!」が表示されています。ちゃんとattributeChangedCallbackが呼ばれているのがわかります。 f:id:gakusei200709:20180709002217p:plain
試しに再度name属性を変えてみます。再度変更すると再び「chenge attribute!」が表示されています。変更があるたびに呼ばれているのがわかります。
f:id:gakusei200709:20180709002235p:plain ちなみに変更を取得するには事前にゲッターを宣言していく必要があります。 何も設定されていなければ取得ができません。

    static get observedAttributes() {return ['name']; }

まとめ

  • custom elementsは新しいタグを自分で作ることができる。
  • 生成されたとき 消されたとき 属性が変化したとき またドキュメントオーナーが変更されたときの4つのライフサイクルに対してのコールバックが用意されている

相互リンク

  • 技術ブログ:ヤモト.tvp
  • 友人氏の技術ブログ 数学ガチ勢がエンジニアになっていく奮闘記