Web Design Leaves

// カスタム要素（クラスのオブジェクト）の定義
class MyElement extends HTMLElement {
  // コンストラクターをオーバーライド
  constructor() {
    // 常に super を最初に呼び出す（親クラスのコンストラクタの呼び出し）
    super();
    // 初期化や Shadow DOM の関連付け、イベントリスナなどを記述
  }
  //メソッドなどの定義などを記述
}
// ページにカスタム要素を登録（window. は省略）
customElements.define('my-element', MyElement);

customElements.define('my-element', class extends HTMLElement {
  constructor() {
    super();
    // 初期化や Shadow DOM の関連付け、イベントリスナなどを記述
  }
  //メソッドなどの定義などを記述
});

class MyElement extends HTMLElement {
  constructor() {
    super();
  }
  // 要素が document に追加された時に呼び出されるライフサイクルコールバック
  connectedCallback() {
    //this は <my-element>
    this.textContent = 'This is My Element!';
  }
}
customElements.define('my-element', MyElement);

<my-element></my-element>

<my-element>This is My Element!</my-element>

<div id="elem" foo="Foo!"></div>

<script>
  const elem = document.getElementById('elem');

  //非標準の属性でも getAttribute() で値を取得可能
  console.log(elem.getAttribute('foo'));  //Foo!
  //非標準の属性でも hasAttribute() で確認可能
  console.log(elem.hasAttribute('foo'));  //true

  //非標準の属性でも setAttribute() で値を設定可能
  elem.setAttribute('foo', 'Bar!');
  console.log(elem.getAttribute('foo')); //Bar!

  //但し、非標準の属性の場合、対応するプロパティは生成されない
  console.log(elem.foo);  //undefined

  //非標準の属性でも removeAttribute() で削除可能
  elem.removeAttribute('foo');
  console.log(elem.hasAttribute('foo'));  //false
</script>

class MyElement extends HTMLElement {

  connectedCallback() {
    // foo 属性のデフォルト値の設定
    const foo = this.getAttribute('foo') || 'Foo';
    this.textContent = foo;
  }
}
customElements.define('my-element', MyElement);

<my-element foo="My element!"></my-element><!-- My element! と出力-->
<my-element></my-element><!-- Foo と出力 -->

<my-element foo="My element!"></my-element>

<script>
  class MyElement extends HTMLElement {
    connectedCallback() {
      const foo = this.getAttribute('foo') || 'Foo';
      this.textContent = foo;
    }
  }
  customElements.define('my-element', MyElement);

  const myElement = document.querySelector('my-element');
  console.log(myElement.getAttribute('foo'));  //My element!
  console.log(myElement.hasAttribute('foo'));  //true
  myElement.setAttribute('foo', 'Bar!');
  console.log(myElement.getAttribute('foo')); //Bar!

  //対応するプロパティは生成されない
  console.log(myElement.foo);  //undefined
</script>

<my-element foo="My element!"></my-element>

<script>
class MyElement extends HTMLElement {

  // get 属性名() でプロパティの getter を定義
  get foo() {
    return this.getAttribute('foo');
  }

  // set 属性名() でプロパティの setter を定義
  set foo(val) {
    this.setAttribute('foo', val);
  }

  connectedCallback() {
    this.textContent = `${ this.foo }`;
  }
}
customElements.define('my-element', MyElement);

const myElement = document.querySelector('my-element');
//プロパティで参照
console.log(myElement.foo);  //My element!
//プロパティで設定（但し、表示には反映されない）
myElement.foo = '123';
console.log(myElement.foo);  //123
//setAttribute() で設定
myElement.setAttribute('foo', 'ABC');
console.log(myElement.foo);  //ABC
</script>

get disabled() {
  //hasAttribute() で disabled 属性が指定されているかどうかの真偽値を返す
  return this.hasAttribute('disabled');
}

set disabled(val) {
  // val が指定されている（true の）場合
  if (val) {
    // disabled 属性に値はいらないので、空文字列をセット
    this.setAttribute('disabled', '');
  } else {
    // disabled 属性を削除
    this.removeAttribute('disabled');
  }
}

<my-element></my-element>

class MyElement extends HTMLElement {
  constructor() {
    //super を最初に呼び出す
    super();
    // foo 属性に対応するプロパティの初期化
    this._foo = 'Foo';
  }

  // get 属性名() でプロパティの getter を定義
  get foo() {
    if(this.hasAttribute('foo')) {
      // foo 属性が設定されていればその値を返す
      return this.getAttribute('foo');
    }
    // foo 属性が設定されていなければ _foo の値を返す
    return this._foo;
  }

  // set 属性名() でプロパティの setter を定義
  set foo(val) {
    // foo 属性の値を更新
    this.setAttribute('foo', val);
    // _foo の値を更新
    this._foo = val;
  }

  connectedCallback() {
    if(this.foo) {
      this.textContent = this.foo;
    }else{
      this.textContent = this._foo;
    }
  }
}
customElements.define('my-element', MyElement);

customElements.whenDefined('hello-element').then(() => {
  console.log('hello-element defined');
});

hello-element:not(:defined) {
  display: none; /* 定義されるまで非表示に */
}

hello-element:defined {
  display: block; /* 定義されたら表示 */
}

// HTMLButtonElement を拡張
class HelloButton extends HTMLButtonElement {
  constructor() {
    super();
    //クリックイベントのリスナーを設定
    this.addEventListener('click', () => alert('Hello!'));
  }
}

//第3引数に具体的な要素を指定する必要があります
customElements.define('hello-button', HelloButton, {extends: 'button'});

customElements.define('hello-button',
  class extends HTMLButtonElement {
    constructor() {
      super();
      this.addEventListener('click', () => alert('Hello!'));
    }
  },
  {extends: 'button'}
);

<button is="hello-button">Click</button>

<button is="hello-button" disabled>Disabled</button>

class HelloButton extends HTMLButtonElement {
  constructor() {
    super();
    //変数の初期化
    let helloTo = 'World'
    //クリックイベントのリスナーを設定
    this.addEventListener('click', () => alert('Hello ' + helloTo + '!'));
    // name 属性が指定されていれば、その値を helloTo に設定
    if(this.hasAttribute('name')) {
      helloTo = this.getAttribute('name')
    }
  }
}
customElements.define('hello-button', HelloButton, {extends: 'button'});

<button is="hello-button" name="Foo">Click</button>

class HelloButton extends HTMLButtonElement {
  constructor() {
    super();
    //プロパティの初期値を設定
    this.helloTo = 'World'
    this.addEventListener('click', () => alert('Hello ' + this.helloTo + '!'));
    if(this.hasAttribute('name')) {
      this.helloTo = this.getAttribute('name')
    }
  }

  //監視する属性のリスト（配列）を指定
  static get observedAttributes() {
    return ['name'];
  }

  //ライフサイクルフック
  attributeChangedCallback(name, oldValue, newValue) {
    //属性（プロパティ）が変更された場合の何らかの処理
    if(name === 'name') {
      if (oldValue === newValue) return;
      //name 属性の値が変更されたら、その値で helloTo プロパティを更新
      this.helloTo = newValue;
    }
  }

  //ライフサイクルフック
  connectedCallback() {
    if(this.hasAttribute('name')) {
      this.helloTo = this.getAttribute('name')
    }
  }
}
customElements.define('hello-button', HelloButton, {extends: 'button'});

class HelloGreeting extends HTMLElement {
  //コンストラクター
  constructor() {
    //super を最初に呼び出す
    super();
    //カスタム要素 <hello-greeting> に空のシャドウ DOM を取り付ける
    // shadow はシャドウルートへの参照
    const shadow = this.attachShadow({mode: 'open'});

    //変数 helloTo の初期化
    let helloTo = 'World';
    // name 属性が設定されていれば
    if(this.hasAttribute('name')) {
      // その値を変数 helloTo に代入
      helloTo = this.getAttribute('name');
    }

    //シャドウルートにシャドウ DOM の文書構造を定義
    shadow.innerHTML = `
    <style>
      p {
        font-size: 18px;
        font-weight: bold;
        color: green;
      }
    </style>
    <p class="hello">
      Hello, ${helloTo}
    </p>`;
  }
};
//カスタム要素を登録
customElements.define('hello-greeting', HelloGreeting);

class HelloGreeting extends HTMLElement {
  //コンストラクター
  constructor() {
    //super を最初に呼び出す
    super();
    //カスタム要素 <hello-greeting> に空のシャドウ DOM を取り付ける
    const shadow = this.attachShadow({mode: 'open'});

    //シャドウルートにシャドウ DOM の文書構造を定義
    shadow.innerHTML = `
    <style>
      p {
        font-size: 18px;
        font-weight: bold;
        color: green;
      }
    </style>
    <p class="hello"></p>`;
  }

  //カスタム要素が DOM に挿入されるたびに毎回呼び出されるライフサイクルフック
  connectedCallback() {
    //変数 helloTo の初期化
    let helloTo = 'World';
    // name 属性が設定されていれば
    if(this.hasAttribute('name')) {
      // その値を変数 helloTo に代入
      helloTo = this.getAttribute('name');
    }
    //シャドウ DOM に追加した p 要素にテキストを設定
    this.shadowRoot.querySelector('p.hello').textContent = ` Hello, ${helloTo}`;
  }
};
//カスタム要素を登録
customElements.define('hello-greeting', HelloGreeting);

class HelloGreeting extends HTMLElement {
  //コンストラクター
  constructor() {
    super();
    //カスタム要素 <hello-greeting> に空のシャドウ DOM を取り付ける
    const shadow = this.attachShadow({mode: 'open'});

    //変数 helloTo の初期化
    let helloTo = 'World';
    // name 属性が設定されていれば
    if(this.hasAttribute('name')) {
      // その値を変数 helloTo に代入
      helloTo = this.getAttribute('name');
    }

    // p 要素の生成
    const p = document.createElement('p');
    // p 要素の class 属性を設定
    p.setAttribute('class', 'hello');
    // p 要素のテキストの生成
    p.textContent = `Hello, ${helloTo}`;
    // style 要素（CSS）の生成
    const style = document.createElement('style');
    // CSS を生成
    style.textContent = `
      p {
        font-size: 18px;
        font-weight: bold;
        color: green;
      }
    `;
    // 生成した要素をシャドウルート（シャドウ DOM）に追加（シャドウ DOM 構造を作成）
    shadow.appendChild(style);
    shadow.appendChild(p);
  }
};
//カスタム要素を登録
customElements.define('hello-greeting', HelloGreeting);

class HelloGreeting extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    const p = document.createElement('p');
    p.setAttribute('class', 'hello');
    const style = document.createElement('style');
    style.textContent = `
      p {
        font-size: 18px;
        font-weight: bold;
        color: green;
      }
    `;
    shadow.appendChild(style);
    shadow.appendChild(p);
  }

  connectedCallback() {
    let helloTo = 'World';
    if(this.hasAttribute('name')) {
      helloTo = this.getAttribute('name');
    }
    this.shadowRoot.querySelector('p.hello').textContent = ` Hello, ${helloTo}`;
  }
};
customElements.define('hello-greeting', HelloGreeting);

<hello-greeting name="Foo"></hello-greeting>

class HelloGreeting extends HTMLElement {
  //コンストラクター
  constructor() {
    //super を最初に呼び出す
    super();
    //カスタム要素 <hello-greeting> に空のシャドウ DOM を取り付ける
    this.attachShadow({mode: 'open'});
  }

  //レンダリング用メソッド
  _render() {
    //変数 helloTo の初期化
    let helloTo = 'World';
    // name 属性が設定されていれば
    if(this.hasAttribute('name')) {
      // その値を変数 helloTo に代入
      helloTo = this.getAttribute('name');
    }

    //シャドウルートにシャドウ DOM の文書構造を定義
    this.shadowRoot.innerHTML = `
      <style>
        p {
          font-size: 18px;
          font-weight: bold;
          color: green;
        }
      </style>
      <p class="hello">
        Hello, ${helloTo}
      </p>
    `;
  }

  //カスタム要素が DOM に挿入される際に呼び出されるライフサイクルメソッド
  connectedCallback() {
    if (!this.rendered) {
      //レンダリング用メソッドを呼び出す
      this._render();
      this.rendered = true;
    }
  }
};
//カスタム要素を登録
customElements.define('hello-greeting', HelloGreeting);

class HelloGreeting extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({mode: 'open'});
    let helloTo = 'World';
    if(this.hasAttribute('name')) {
      helloTo = this.getAttribute('name');
    }
    shadow.innerHTML = `
    <style>
      p {
        font-size: 18px;
        font-weight: bold;
        color: green;
      }
    </style>
    <p class="hello">
      Hello, ${helloTo}
    </p>`;
  }
  connectedCallback() {
    //document からはシャドウツリー内の要素を取得できない
    console.log(document.querySelectorAll('p.hello').length);  //0
    //シャドウルートからはシャドウツリー内の要素を取得できる
    console.log(this.shadowRoot.querySelectorAll('p.hello').length);  //1
  }
};
customElements.define('hello-greeting', HelloGreeting);

class HelloGreeting extends HTMLElement {
  constructor() {
    super();

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

    let helloTo = 'World';
    if(this.hasAttribute('name')) {
      helloTo = this.getAttribute('name');
    }

    const p = document.createElement('p');
    p.setAttribute('class', 'hello');
    p.textContent = `Hello, ${helloTo}`;

    // link 要素を生成し、外部のスタイルをシャドウ DOM に適用
    const linkElem = document.createElement('link');
    // link 要素に rel 属性を設定
    linkElem.setAttribute('rel', 'stylesheet');
    // link 要素に href 属性を設定
    linkElem.setAttribute('href', 'style.css')
    ;
    // 生成した要素をシャドウ DOM に追加
    shadow.appendChild(linkElem);
    shadow.appendChild(p);
  }
};
customElements.define('hello-greeting', HelloGreeting);

class HelloGreeting extends HTMLElement {
  constructor() {
    super();

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

    let helloTo = 'World';
    if(this.hasAttribute('name')) {
      helloTo = this.getAttribute('name');
    }

    // link 要素を使って外部スタイルシートを参照
    shadow.innerHTML = `
    <link rel="stylesheet" href="style.css">
    <p class="hello">
      Hello, ${helloTo}
    </p>
    `;
  }
};
customElements.define('hello-greeting', HelloGreeting);

p {
  font-size: 18px;
  font-weight: bold;
  color: red;
}

:host {
  display: block; /* カスタム要素はデフォルトで display: inline */
  contain: content; /* パフォーマンスを向上 */
}

customElements.define('user-info', class extends HTMLElement {
  constructor() {
    super();

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

    //Light DOM のコンテンツを挿入する位置に slot 要素を配置して name 属性を指定
    this.shadowRoot.innerHTML = `
      <div>Name:
        <slot name="username"></slot>
      </div>
      <div>Birthday:
        <slot name="birthday"></slot>
      </div>
    `;
  }
});

<user-info>
  <span slot="username">Foo</span>
  <span slot="birthday">1989.03.21</span>
</user-info>

<user-info>
  <p slot="username">Foo</p>
  <p slot="username">Bar</p>
  <p slot="username">Baz</p>
</user-info>

<user-info>
  <span slot="username">Foo</span>
  <div>
    <!-- user-info の直接の子でないため、無効なスロット -->
    <span slot="birthday">1989.03.21</span>
  </div>
</user-info>

customElements.define('custom-menu', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
    <style>
      ul {
        margin: 10px 0 0;
        list-style: none;
        padding-left: 20px;
      }
      .closed ul {
        display: none;
      }
      ::slotted([slot="title"]) {
        font-weight: bold;
        cursor: pointer;
        border: 1px solid #999;
        padding: 5px 10px;
      }
    </style>
    <div class="menu">
      <slot name="title"></slot>
      <ul>
        <slot name="item"></slot>
      </ul>
    </div>
    `;
    //name="title" のスロット（シャドウルートからクエリ）をクリックした際の処理
    this.shadowRoot.querySelector('slot[name="title"]').onclick = () => {
      //メニュー（ul 要素）の表示・非表示をトグル
      this.shadowRoot.querySelector('.menu').classList.toggle('closed');
    };
  }
});

<custom-menu>
  <span slot="title">Menu</span>
  <li slot="item">Item 1</li>
  <li slot="item">Item 2</li>
</custom-menu>

customElements.define('custom-menu', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
    <style>
      ::slotted([slot="item"]) {
        list-style: none;
      }
      .closed ::slotted([slot="item"])  {
        display: none;
      }
      ::slotted([slot="title"]) {
        font-weight: bold;
        cursor: pointer;
        border: 1px solid #999;
        padding: 5px 10px;
        margin-bottom: 10px;
        display: inline-block;
      }
    </style>
    <div class="menu">
      <slot name="title"></slot>
      <slot name="item"></slot>
    </div>
    `;
    //name="title" のスロット（シャドウルートからクエリ）をクリックした際の処理
    this.shadowRoot.querySelector('slot[name="title"]').onclick = () => {
      //メニュー（ul 要素）の表示・非表示をトグル
      this.shadowRoot.querySelector('.menu').classList.toggle('closed');
    };
  }
});

<custom-menu>
  <span slot="title">Menu</span>
  <ul slot="item">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</custom-menu>

customElements.define('user-info', class extends HTMLElement {
  constructor() {
    super();

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

    this.shadowRoot.innerHTML = `
      <div>Name:
        <slot name="username">Anonymous</slot>
      </div>
      <div>Birthday:
        <slot name="birthday">N/A</slot>
      </div>
    `;
  }
});

customElements.define('user-info', class extends HTMLElement {
  constructor() {
    super();

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

    this.shadowRoot.innerHTML = `
      <div>Name:
        <slot name="username"></slot>
      </div>
      <div>Birthday:
        <slot name="birthday"></slot>
      </div>
      <div>Other information:
        <slot></slot>
      </div>
    `;
  }
});

<user-info>
  <p>something...</p>
  <span slot="username">Foo</span>
  <span slot="birthday">1989.03.21</span>
  <div>something else ...</div>
</user-info>

customElements.define('user-info', class extends HTMLElement {
  constructor() {
    super();

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

    this.shadowRoot.innerHTML = `
      <style>
        span { color: red; }
      </style>
      <div>Name:
        <slot name="username"></slot>
      </div>
      <div>Birthday:
        <slot name="birthday"></slot>
      </div>
    `;
  }
});

<style>
  /* ドキュメントのスタイル */
  span { font-weight: bold }
</style>

<user-info>
  <span slot="username">Foo</span>
  <span slot="birthday">1989.03.21</span>
</user-info>

customElements.define('user-info', class extends HTMLElement {
  constructor() {
    super();

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

    this.shadowRoot.innerHTML = `
      <style>
        slot {
          font-weight: bold;
          color: red;
        }
      </style>
      <div>Name:
        <slot name="username"></slot>
      </div>
      <div>Birthday:
        <slot name="birthday"></slot>
      </div>
    `;
  }
});

customElements.define('custom-menu', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
    <div class="menu">
      <slot name="title"></slot>
      <ul>
        <slot name="item"></slot>
      </ul>
    </div>
    `;
    // class="menu" の div 要素に slotchange イベントのリスナを設定
    this.shadowRoot.querySelector('div.menu').addEventListener('slotchange',
      e => console.log("slotchange: " + e.target.name)
    );
  }
});

//カスタム要素を取得
const menu = document.getElementById('c-menu');

//1秒後にメニューアイテム（スロット）を追加
setTimeout(() => {
  const item = document.createElement('li');
  item.setAttribute('slot', 'item');
  item.textContent = 'Item 3';
  menu.appendChild(item);
  console.log('1秒後: メニューアイテムを追加')
}, 1000);

//2秒後にメニュータイトル（スロット）の内容を変更（slotchange イベントは発火しない）
setTimeout(() => {
  menu.querySelector('[slot="title"]').innerHTML = "New Menu";
  console.log('2秒後: メニュータイトルを変更');
}, 2000);

<custom-menu id="c-menu">
  <span slot="title">Menu</span>
  <li slot="item">Item 1</li>
  <li slot="item">Item 2</li>
</custom-menu>

slotchange: title  //初期化の際に発生
slotchange: item   //初期化の際に発生
1秒後: メニューアイテムを追加
slotchange: item  //スロットを追加時に発生
2秒後: メニュータイトルを変更

customElements.define('custom-menu', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div class="menu">
        <slot name="title"></slot>
        <ul>
          <slot name="item"></slot>
        </ul>
      </div>
    `;

    // slot 要素を全て取得
    const slots = this.shadowRoot.querySelectorAll('slot');

    // それぞれの slot 要素を調べる
    slots.forEach(slot => {
      // スロットの名前を出力
      console.log('slot name: ' + slot.name);
      // スロットへ割り当てられている DOM ノード（配列）を取得
      const nodes = slot.assignedNodes();
      // それぞれの DOM ノードを調べる
      nodes.forEach(node => {
        // DOM ノードの HTML を出力
        console.log( node.outerHTML);
      })
    })
  }
});

<custom-menu id="c-menu">
  <span slot="title">Menu</span>
  <li slot="item">Item 1</li>
  <li slot="item">Item 2</li>
  <li slot="item">Item 3</li>
</custom-menu>

slot name: title
<span slot="title">Menu</span>
slot name: item
<li slot="item">Item 1</li>
<li slot="item">Item 2</li>
<li slot="item">Item 3</li>

customElements.define('custom-menu', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div class="menu">
        <slot name="title"></slot>
        <ul>
          <slot name="item"></slot>
        </ul>
      </div>
    `;

    // class="menu" の div 要素にリスナを設定
    this.shadowRoot.querySelector('div.menu').addEventListener('slotchange', e => {
      //変更のあった（slotchange イベントを発生した）スロットを取得
      let slot = e.target;
      // スロットの名前が item であれば
      if (slot.name == 'item') {
        // スロットへ割り当てられている DOM ノード（配列）を取得
        const nodes = slot.assignedNodes();
        // それぞれの DOM ノードを調べる
        nodes.forEach(node => {
          // DOM ノードのテキストを出力
          console.log( node.textContent);
        })
      }
    });
  }
});

const menu = document.getElementById('c-menu');
//1秒後にメニューアイテムを追加
setTimeout(() => {
  const item = document.createElement('li');
  item.setAttribute('slot', 'item');
  item.textContent = 'Item 4';
  menu.appendChild(item);
  console.log('1秒後: メニューアイテムを追加')
}, 1000);

Item 1  //初期化時
Item 2  //初期化時
Item 3  //初期化時
1秒後: メニューアイテムを追加
Item 1
Item 2
Item 3
Item 4

<custom-menu id="c-menu">
  <span slot="title">Menu</span>
  <li slot="item">Item 1</li>
  <li slot="item">Item 2</li>
  <li slot="item">Item 3</li>
</custom-menu>

<script>
  customElements.define('custom-menu', class extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.shadowRoot.innerHTML = `
        <div class="menu">
          <slot name="title"></slot>
          <ul>
            <slot name="item"></slot>
          </ul>
        </div>
      `;
    }
  });

  const slottedSpan = document.querySelector('custom-menu span')
  console.log(slottedSpan.assignedSlot);
  //出力 <slot name="title"></slot>

  const slottedLi0 = document.querySelectorAll('custom-menu li')[0];
  console.log(slottedLi0.assignedSlot);
  //出力 <slot name="item"></slot>

</script>

<template id="my-button">
  <style>
    button {
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      background-color: var(--bg-color, green); /* CSS 変数でフォールバックを指定 */
      color: var(--color, lightyellow); /* CSS 変数でフォールバックを指定 */
      cursor: pointer;
    }
  </style>
  <button type="button">
    <slot name="label"></slot>
  </button>
</template>

customElements.define( 'my-button', class extends HTMLElement {
  constructor() {
    //super を最初に呼び出す
    super();
    //テンプレートを取得
    const template = document.getElementById('my-button');
    //カスタム要素にシャドウ DOM を取り付け
    const shadow = this.attachShadow({ mode: 'open' });
    //テンプレートのコンテンツを複製したものをシャドウルートに追加
    shadow.appendChild(template.content.cloneNode(true));
  }
});

<style>
  /*  ドキュメントのスタイル  */
  my-button.dark {
    --bg-color: darkgreen;  /* CSS 変数を定義 */
    --color: rgb(214, 245, 214);  /* CSS 変数を定義 */
  }
</style>

<my-button class="dark"><!-- 上記のスタイルが適用される -->
  <span slot="label">Click</span>
</my-button>

<my-button><!-- テンプレートで指定したデフォルトのスタイル -->
  <span slot="label">Click</span>
</my-button>

<template id="color-button">
  <style>
    button {
      border: none;
      border-radius: 4px;
      padding: 6px 12px;
      background-color: #ccc;
      color: #333;
      cursor: pointer;
    }
  </style>
  <button type="button">
    <slot name="label"></slot>
  </button>
</template>

customElements.define('color-button', class extends HTMLElement {
  //コンストラクター
  constructor() {
    super();
    //プロパティの初期化
    this._bgColor = '#ccc';
    this._color = '#333';

    //テンプレートを取得してのコンテンツの複製を生成
    const templateContent = document.getElementById('color-button').content.cloneNode(true);

    //テンプレート（コンテンツの複製）の button 要素にイベントリスナーを設定
    templateContent.querySelector('button').addEventListener('click', ()=> {
      alert('クリックされました！');
    })

    //カスタム要素 <hello-greeting> にシャドウ DOM を取り付ける
    const shadow = this.attachShadow({mode: 'open'});
    //テンプレートのコンテンツを複製したものをシャドウルートに追加
    shadow.appendChild(templateContent);
  }
  //getter
  get bgColor() {
    if(this.hasAttribute('background-color')) {
      return this.getAttribute('background-color')
    }
    return this._bgColor;
  }
  //getter
  get color() {
    if(this.hasAttribute('color')) {
      return this.getAttribute('color')
    }
    return this._color;
  }
  //setter（background-color 属性と _bgColor プロパティの値を設定）
  set bgColor(val) {
    //属性名は CSS のプロパティ名と同じに設定
    this.setAttribute('background-color', val);
    this._bgColor = val;
  }
  //setter（color 属性と _color プロパティの値を設定）
  set color(val) {
    //属性名は CSS のプロパティ名と同じに設定
    this.setAttribute('color', val);
    this._color = val;
  }

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

  //属性が変更された際に呼び出されるライフサイクルフック
  attributeChangedCallback(attr, oldValue, newValue) {
    if (oldValue === newValue) return;
    //シャドウルートから button を取得してスタイルを設定
    this.shadowRoot.querySelector('button').style.setProperty(attr, newValue);
  }
});

attributeChangedCallback(attr, oldValue, newValue) {
  if (oldValue === newValue) return;
  //属性名により分岐処理
  if (attr == 'col') {
    this.shadowRoot.querySelector('button').style.setProperty('color', newValue);
  }
  if (attr == 'bg-color') {
    this.shadowRoot.querySelector('button').style.setProperty('background-color', newValue);
  }
}

<color-button> <!-- デフォルトのボタン  -->
  <span slot="label">Click</span>
</color-button>

<color-button color="yellow" background-color="orange">
  <span slot="label">Click</span>
</color-button>

const cbtn = document.querySelector('color-button');
//文字色を変更
cbtn.color = 'pink';
//背景色を変更
cbtn.setAttribute('background-color', 'purple');

console.log(cbtn.getAttribute('color'));  //pink
console.log(cbtn.bgColor);  //purple

<template id="my-btn">
  <button>Click</button>
</template>
<div id="target"></div>

const template = document.getElementById('my-btn');
const target = document.getElementById('target');
// コンテンツの button 要素の複製（DocumentFragment）を取得
const button = template.content.cloneNode(true);
// button 要素にイベントリスナーを設定（動作しない）
button.addEventListener('click', ()=> {
  alert('Hello!')
});
// button 要素の複製を DOM に挿入
target.appendChild(button);

const template = document.getElementById('my-btn');
const target = document.getElementById('target');
// DocumentFragment の最初の子要素を取得
const button = template.content.cloneNode(true).firstElementChild;
// または const button = template.content.firstElementChild.cloneNode(true);
button.addEventListener('click', ()=> {
  alert('Hello!')
});
target.appendChild(button);

const template = document.getElementById('my-btn');
const target = document.getElementById('target');
const button = template.content.cloneNode(true);
// フラグメントを DOM に挿入
target.appendChild(button);
// DOM に追加してからイベントリスナーを設定
target.querySelector('button').addEventListener('click', ()=> {
  alert('Hello!')
});

<template id="my-btn">
  <button onclick="alert('Hello!')">Click</button>
</template>
<div id="target"></div>

<template id="my-btn">
  <button onclick="hello()">Click</button>
  <script>
    function hello() {
      alert('Hello!');
    }
  </script>
</template>
<div id="target"></div>

const template = document.getElementById('my-btn');
const target = document.getElementById('target');
const button = template.content.cloneNode(true);
target.appendChild(button);