ウェブ コンポーネントはクロスブラウザ サポートを獲得し、コミュニティは急速に成長しています。また、必要なコンポーネントを正確に見つけることができる、まったく新しいウェブ コンポーネント カタログも登場しています。
複数のプロジェクトで簡単に使用したり、使用する JavaScript フレームワークに関係なく他のデベロッパーと共有したりできる、独自の自己完結型 JavaScript コンポーネントを構築したいと思ったことはありませんか？ウェブ コンポーネントが適しているかもしれません。
Web Components は、独自の HTML 要素を作成できる一連の新しいウェブ プラットフォーム機能です。新しいカスタム要素にはそれぞれ <my-button> などのカスタムタグを設定でき、組み込み要素のすべての利点を利用できます。カスタム要素にはプロパティとメソッドを設定でき、イベントを発生させて応答できます。また、カプセル化されたスタイルと DOM ツリーを設定することで、独自のルック＆フィールを実現することもできます。
プラットフォーム ベースの低レベルのコンポーネント モデルを提供する Web コンポーネントを使用すると、特殊なボタンから日付選択ツールなどの複雑なビューまで、あらゆる用途で再利用可能な要素を作成して共有できます。ウェブ コンポーネントは、強力なカプセル化プリミティブを含むプラットフォーム API で構築されているため、これらのコンポーネントを他の JavaScript ライブラリやフレームワーク内で、標準の DOM 要素のように使用することもできます。
Web Components は以前からご存じかもしれません。Web Components 仕様の初期バージョン（v0）は Chrome 33 でリリースされています。
現在、ブラウザ ベンダー間の幅広いコラボレーションにより、次世代の Web Components 仕様（v1）が広くサポートされています。Chrome は、Chrome 53 と Chrome 54 で、Web Components を構成する 2 つの主要な仕様（Shadow DOM と Custom Elements）をサポートしています。Safari は Safari 10 の Shadow DOM v1 のサポートをリリースし、WebKit の Custom Elements v1 の実装を完了しました。Firefox では現在、Shadow DOM と Custom Elements v1 を開発中です。Shadow DOM と Custom Elements はどちらも Edge のロードマップにあります。
v1 実装を使用して新しいカスタム要素を定義するには、ES6 構文を使用して HTMLElement を拡張する新しいクラスを作成し、ブラウザに登録します。
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
新しい v1 仕様は非常に強力です。カスタム要素 v1 と Shadow DOM v1 の使用に関するチュートリアルを用意して、使い始める際に役立てていただけるようにしました。
webcomponents.org
ウェブ コンポーネント コミュニティも急速に成長しています。ウェブ コンポーネント コミュニティの中心となる webcomponents.org サイトが更新され、デベロッパーが要素を共有するためのカタログが統合されました。
webcomponents.org サイトには、Web Components のspecs、Web Components コミュニティからの最新情報とコンテンツに関する情報が掲載されています。また、他のデベロッパーが作成したオープンソース要素と要素のコレクションのドキュメントも表示されます。
最初の要素の作成は、Google の Polymer などのライブラリを使用して開始できます。または、低レベルの Web Component API を直接使用することもできます。次に、webcomponents.org で要素を公開します。
コンポーネント化をお楽しみください。