プログラミング

Web Components のサンプルコード

投稿日：2019年12月6日 更新日：

1. Web Components

Web Components というのは、以下の仕様をまとめた仕様のことです。

  1. カスタム要素（の仕様）
  2. Shadow DOM（の仕様）
  3. HTML テンプレート（の仕様）
  4. ES Module（の仕様）

これらの仕様により、次の特徴を持った HTMLの部品を作成することができます。

  • テンプレート内の CSS の効果をカスタムタグ内に限定することができる（カプセル化）
  • 再利用しやすい

本記事では、Web Components を使ったサンプルコードを紹介します。

2. Web Components を使うための雛形

その１：時間を表示する

HTML

<style>
my-clock {
  color: blue;
}
</style>

<my-clock></my-clock>
  • <my-clock> というカスタムタグに色を設定しています。これは、たとえば <h2> に対して色を設定するのと同じです。<h2> は標準で用意されているタグであり、<my-clock> は独自に作成したタグであるという違いでしかありません。Shadow DOM の中でもCSSを記述することはできますが、Shadow DOM の外側での設定が優先されて適用されます。

JavaScript

customElements.define('my-clock',
  class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
<style>
:host {
  display: block;
  contain: content;
  font-size: 2em;
  font-weight: bold;
  font-family: monospace;
  background-color: #aaffcc;
  text-align: center;
}
</style>
<p id="dateOnScreen"></p>
`;
      this._elmDateOnPage = this.shadowRoot.querySelector('#dateOnScreen');
    }

    connectedCallback() {
      setInterval(() => {
        this._elmDateOnPage.textContent = moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    }
})
  • テンプレート・リテラルを使って HTML と CSS を記述し、それを ShadowRoot にセットしています。
  • カスタムタグ内の要素を取得するには、ShadowRoot の querySelector() メソッドを使います。
  • カスタムタグがDOMに挿入されたときに、connectedCallback() メソッドが実行されます。DOM 上にカスタムタグが存在していないとできない初期化処理などは、ここに記述します。
  • :host は、カスタムタグ自身を指しています。

デモページ

🔗 シンプル時計 (Web Components)

class を export する場合の書き方

class 定義を export した JavaScript ファイルを、HTML側から import して使う場合の書き方です。

HTML

<style>
my-clock {
  color: blue;
}
</style>

<my-clock></my-clock>

<script type="module">
import MyClock from './my-clock.js'
customElements.define('my-clock', MyClock);
</script>

JavaScript

export default class extends HTMLElement {
    constructor() {
      super();
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.innerHTML = `
<style>
:host {
  display: block;
  contain: content;
  font-size: 2em;
  font-weight: bold;
  font-family: monospace;
  background-color: #aaffcc;
  text-align: center;
}
</style>
<p id="dateOnScreen"></p>
`;
      this._elmDateOnPage = this.shadowRoot.querySelector('#dateOnScreen');
    }

    connectedCallback() {
      setInterval(() => {
        this._elmDateOnPage.textContent = moment().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    }
}

その２：数値を増減する

HTML

<my-elm interval="1"></my-elm>

JavaScript

class MyElm extends HTMLElement {
  //static get observedAttributes() {
  //  return ['interval'];
  //}

  constructor() {
    super();
    // メソッド内で this を使う場合は必要
    this._onIncClick = this._onIncClick.bind(this);
    this._onDecClick = this._onDecClick.bind(this);
    this._onIntervalIncClick = this._onIntervalIncClick.bind(this);
    this._onIntervalDecClick = this._onIntervalDecClick.bind(this);

    const shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `
<style>
:host {
  display: block;
  contain: content;
}
p.title {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0;
}
p[name=output] {
  color: blue;
  margin-left: 1.5em;
}
span[name=interval] {
  display: inline-block;
  margin-right: 1em;
}
button {
  cursor: pointer;
}
</style>
<p class="title">数字を増減させる</p>
<p name="output"></p>
<button name="inc">増</button> <button name="dec">減</button>
<hr>
Interval 属性値: <span name="interval"></span><button name="incInterval">増</button> <button name="decInterval">減</bu
tton>
`;

    this._count = 0;
    this._output = this.shadowRoot.querySelector('p[name=output]');
    this._btnInc = this.shadowRoot.querySelector('button[name=inc]');
    this._btnDec = this.shadowRoot.querySelector('button[name=dec]');
    this._intervalElm = this.shadowRoot.querySelector('span[name=interval]');
    this._btnIntervalInc = this.shadowRoot.querySelector('button[name=incInterval]');
    this._btnIntervalDec = this.shadowRoot.querySelector('button[name=decInterval]');

    this._btnInc.addEventListener('click', this._onIncClick);
    this._btnDec.addEventListener('click', this._onDecClick);
    this._btnIntervalInc.addEventListener('click', this._onIntervalIncClick);
    this._btnIntervalDec.addEventListener('click', this._onIntervalDecClick);
  }

  connectedCallback() {
    this._output.textContent = `0`;
    if (!Number.isInteger(this.interval)) {
      this.interval = 1;
    }
    this._intervalElm.textContent = this.interval;
  }

  disconnectedCallback() {
    if (this._btnInc) {
      this._btnInc.removeEventListener('click', this._onIncClick);
    }
    if (this._btnDec) {
      this._btnDec.removeEventListener('click', this._onDecClick);
    }
    if (this._btnIntervalInc) {
      this._btnIntervalInc.removeEventListener('click', this._onIntervalIncClick);
    }
    if (this._btnIntervalDec) {
      this._btnIntervalDec.removeEventListener('click', this._onIntervalDecClick);
    }
  }

  set interval(value) {
    this.setAttribute('interval', value);
    this._intervalElm.textContent = this.interval;
  }

  get interval() {
    return parseInt(this.getAttribute('interval'));
  }

  _onIncClick() {
    this._count += this.interval;
    this._output.textContent = `${this._count}`;
  }

  _onDecClick() {
    this._count -= this.interval;
    this._output.textContent = `${this._count}`;
  }

  _onIntervalIncClick() {
    this.interval += 1;
  }

  _onIntervalIncClick() {
    this.interval += 1;
  }

  _onIntervalDecClick() {
    this.interval -= 1;
  }

  //attributeChangedCallback(name, oldValue, newValue) {
  //  console.log('attributeChangedCallback()', name, oldValue, newValue);
  //  //this[name] = newValue;
  //}
}
window.customElements.define('my-elm', MyElm);

デモページ

🔗 Web Components: サンプルその１

3. メモ

  • Web Components のサンプルコードをいろいろ探してみましたが、「<template> タグを使って Shadow DOM に HTML と CSS をセットする」サンプルはあまり見付かりませんでした。Web Components から HTML Import の仕様が削られました(?)が、<template> タグを使うことすら推奨されていない印象を受けます。ということで、本記事では素直に JavaScript の テンプレート・リテラル を使っています。

4. おわりに

他のサンプルも追加していく予定です。

5. 参考

📂-プログラミング

執筆者：labo

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

web development

Web Development for Beginners を読む：レッスン18, 19, 20

目次1. はじめに2. Part 4: レーザーと衝突検知を追加する(1) 衝突検知のための「オブジェクトの四角形表現を返す関数」を用意する(2) 衝突検知の判定関数を追加する(3) レーザー発射機能 …

Web Programming

Service Worker の状態変化を検証するためのウェブページを作りました

Service Worker の状態変化を検証するためのウェブページを作りました。

Python

Pythonのバージョンを切り替える pyenv の使い方

Pythonのバージョンを切り替える pyenv の使い方について説明します。

C言語のポインタを理解するためのお勧め書籍を紹介します

例え話をしないC言語のポインタの説明 | 右や左の旦那様 C言語のポインタについての記事が、はてなブックマークのトップページに載っていました。 私は業務・趣味のどちらにおいても C言語は使いません。し …

web development

Web Development for Beginners を読む：レッスン6と7

目次1. はじめに2. Lesson 6: JavaScript Basics: Making DecisionsA Brief Recap on Booleans（ブール値の簡単な要約）Compar …

PREV
素のJavaScript と Sass で Webページを作成するための雛形
NEXT
Chrome: ツールバー上の拡張機能アイコンをメニューに移動させる方法
↑