web componentsについて

WebComponents

web componentsとは何か

Webコンポーネントは、カスタム/再利用可能でカプセル化されたHTMLタグを作成できるWebプラットフォームAPIのセットである。

以下、4つの主要な仕様を持つ。

Custom Elements

Custom Elements

Custom Elementsは、DOM要素を独自に構築する方法を提供する。

Shadow DOM

Shadow DOM

Shadow DOM仕様は、Webコンポーネントでカプセル化されたタグを使用する方法を定義する。

ES Modules

ES Modules specification

ESモジュール仕様では、スタンダードベースのモジュール化された方法でJSドキュメントを組み込み、再利用することを定義する。

HTML Template

HTML template element specification

HTML Template仕様では、ページ読み込み時には使用されないが、実行時に後でインスタンス化されるマークアップの断片を宣言する方法を定義する。

demo

custom-btn というカスタム要素を作ってみる

<div>
  <custom-btn></custom-btn>
  <custom-btn>button name</custom-btn>
</div>

<script>
class customBtn extends HTMLElement {
  constructor() {
    super()
    const shadowRoot = this.attachShadow({ mode: 'open' })
    shadowRoot.innerHTML = `
      <button 
        style="background: transparent;">
        <slot>default btn name</slot>
      </button>
    `
  }
}
customElements.define('custom-btn', customBtn)
</script>

demo

See the Pen webcomponents custom btn by tic40 (@ccpzjoh) on CodePen.

ブラウザ対応状況

https://caniuse.com/#search=web%20components