Web Components の実験 その1

1. このページの目的

カスタム要素 v1: 再利用可能なウェブ コンポーネント  |  Web  |  Google Developers に載っているコードを試してみる。

2. デモその1

<button>タグ (HTMLButtonElementクラス) を拡張する。

コード

HTML

<!-- カスタムタグではなく <button>タグを使う -->
<button is="fancy-button">Fancy button!</button>
<button is="fancy-button" disabled>Fancy button!</button>
<!-- 以下の使い方はNG -->
<fancy-button disabled>Hello!</fancy-button>

JavaScript

class FancyButton extends HTMLButtonElement {
  ...
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});

実行結果

Hello!

メモ

3. デモその2

connectedCallback() を使って、コンテンツを上書きする。

※ 要素定義済みのコンテンツを追加するには、、Shadow DOM を使ったほうが良い。

コード

HTML

<x-foo-with-markup>
 <b>I'm an x-foo-with-markup!</b>
</x-foo-with-markup>

JavaScript

customElements.define('x-foo-with-markup', class extends HTMLElement {
  connectedCallback() {
    this.innerHTML = "<i>I'm an x-foo-with-markup!</i>";
  }
});

実行結果

I'm an x-foo-with-markup!

4. デモその3

「未登録要素の事前スタイル設定(:not(:defined))」を試す。

コード

HTML

<style>
app-drawer:not(:defined),
app-div:not(:defined) {
  background-color: #c7d7ff; /* 薄い青 */
  color: orange;
}
app-drawer:defined,
app-div:defined {
  background-color: #ffc7e0; /* pink */
  color: blue;
}
</style>

<app-drawer></app-drawer>
<p>---------------</p>
<app-div>app-div</app-div>

JavaScript

window.customElements.define('app-drawer', class extends HTMLElement {
  constructor() {
    super();

    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
      <style>
      :host {
        color: red;
        background-color: #ffc7e0; /* pink */
      }
      /* 以下は効かない
      app-drawer {
        background-color: #ffc7e0;
      }*/
      </style>
      <span>Hi!</span>
      <p>Hello, <span>World!</span></p>
    `;
  }
});

実行結果

---------------

app-div

メモ

3. 結論

4. 参考