Web Components とは
Web Components とは、カプセル化されたカスタム要素を作成し、Web アプリで再利用するための技術。
Web Components を実現する 3 つの要素
- Custom Elements
- Shadow DOM
- HTML Templates
1. Custom Elements
Custom Elements とは、独自のタグ名で、任意の振る舞いを持った HTML 要素を定義できる JavaScript API。 <my-element></my-element>のように定義できる。
2. Shadow DOM
Shadow DOM とは、DOM のカプセル化を実現する JavaScript API。 メインのドキュメントとの DOM とは別にレンダリングされる。メインのドキュメントからアクセスできない。 カプセル化することにより、ローカルのスタイルルールの定義といった要素の機能を限定できる。
3. HTML Templates
HTML Templates とは、要素をテンプレートとして扱う機能。<template>と<slot>要素によって document 上に配置し、使い回すことができる。