DOM

以下のコードは word-count-web-component という例（ライブデモも見てください）から持ってきています。カスタム要素のクラスを作成した後に、CustomElementRegistry.define() メソッドを使用してカスタム要素を定義していることに注意してください。

// 要素のクラスを作成

class WordCount extends HTMLParagraphElement {

  constructor() {

    // コンストラクターでは常に super を最初に呼び出してください

    super();



    // 要素の親要素の語数を数える

    var wcParent = this.parentNode;



    function countWords(node){

      var text = node.innerText || node.textContent

      return text.split(/\s+/g).length;

    }



    var count = 'Words: ' + countWords(wcParent);



    // シャドウルートを生成

    var shadow = this.attachShadow({mode: 'open'});



    // テキストノードを生成し、語数を追加

    var text = document.createElement('span');

    text.textContent = count;



    // シャドウルートに追加

    shadow.appendChild(text);



    // 要素の内容が変化したとき、語数を更新

    setInterval(function() {

      var count = 'Words: ' + countWords(wcParent);

      text.textContent = count;

    }, 200)



  }

}



// 新しい要素を定義

customElements.define('word-count', WordCount, { extends: 'p' });