Web Componentsとは

再利用可能な部品を作成するための技術。今回はその要素であるCustom ElementsとShadow DOMを触ってみます。

Custom Elements

独自の要素を作成できる。

ElementA.js

class ElementA extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `
      <style>
        div { color: red }
      </style>
      <div>Hello</div>`
  }
}

customElements.define('element-a', ElementA);

HTMLElementを継承したclassを定義し、customElements.defineで要素を定義することでHTMLで<element-a></element-a>のように呼ぶことができます。

Shadow DOM

要素をカプセル化できます。カプセル化することによって他のstyleの影響をうけなくなります。

ElementB.js

class ElementB extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({mode: 'open'});
    this.shadowRoot.innerHTML = `
      <style>
        div { color: blue }
      </style>
      <div>Hello</div>`
  }
}

customElements.define('element-b', ElementB);

this.attachShadowを呼び出すことでShadow DOMを作成できます。

定義した要素を使う

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Web Components</title>
    <script type="module" src="./ElementA.js"></script>
    <script type="module" src="./ElementB.js"></script>
</head>
<body>
    <element-a></element-a>
    <element-b></element-b>
</body>
</html>

このようにして定義した要素を呼び出します。

所感

Reactなどのライブラリを使用せずに、素のJavaScriptで再利用可能な部品を作成できるところがいいですね。

Web Components触ってみた

Web Componentsとは

Custom Elements

Shadow DOM

定義した要素を使う

所感