Loading article…
Web Componentsは、Webの標準コンポーネントモデルを提供する一連の機能であり[ 1 ]、個々のHTML要素のカプセル化と相互運用性を可能にします。Web Componentsは、マイクロフロントエンドを構築する際によく用いられる手法です。
Web コンポーネントを作成するために使用される主なテクノロジーは次のとおりです。[ 2 ]
カスタム要素には、自律型カスタム要素とカスタマイズされた組み込み要素の 2 つの部分があります。自律型カスタム要素は、ネイティブHTML要素から完全に分離されたHTML要素です。これらは基本的に、カスタム要素APIを使用してボトムアップで構築されます。カスタマイズされた組み込み要素は、ネイティブ HTML 要素に基づいて構築され、その機能を再利用する要素です。[ 4 ]
Shadow DOM は、 Web ブラウザがDOM要素をメインのドキュメント DOM ツリーに組み込まずにレンダリングできるようにする機能です。これにより、開発者とブラウザがアクセスできる範囲に障壁ができます。開発者はネストされた要素と同じ方法で Shadow DOM にアクセスすることはできませんが、ブラウザはネストされた要素と同じ方法でそのコードをレンダリングおよび変更できます。特定の要素の Shadow DOM 内にスコープされた CSS の影響は、CSSスタイルが漏洩して、影響を与えるべきではない要素に影響を与えるリスクなしに、 HTML要素をカプセル化できることです。これらの要素は HTML と CSS に関してカプセル化されていますが、ドキュメント内の他の要素が取得できるイベントを発火することは可能です。[ 5 ] [ 6 ]
要素内のスコープ付きサブツリーはシャドウツリーと呼ばれます。シャドウツリーがアタッチされている要素はシャドウホストと呼ばれます。[ 6 ]
Shadow DOM は、リテラル要素として添付するか、スクリプトを使用して、常に既存の要素に接続する必要があります。JavaScript では、Shadow DOM は を使用して要素に添付されますElement.attachShadow()。[ 7 ]
HTMLテンプレートは、ページ読み込み時にはレンダリングされないものの、実行時にインスタンス化できるHTMLコンテンツのブロックを定義します。テンプレート要素の構造は以下のとおりです。
< template > < h1 >タイトル</ h1 > < p >説明</ p > </ template >テンプレート内のスクリプトは、コンテンツが複製されるかDOMに追加されるまで実行されず、リソースも取得されません。[ 8 ]
Web Componentsは、すべての主要ブラウザの最新バージョンでサポートされています。[ 9 ]
古いブラウザとの下位互換性は、JavaScriptベースのポリフィルを使用して実装されています。
カスタム要素を作成する際の抽象化レベルを高めることを目的として、Web Components をベースに構築されたライブラリは数多く存在します。これらのライブラリには、X-Tag、Slim.js、Polymer、Bosonic、Riot.js、Salesforce Lightning Web Components、DataFormsJS、Telepathy、Wompoなどがあります。
Web Components エコシステムには、数多くのコミュニティ活動があります。WebComponents.org [ 10 ]は、既存の Web Components を検索するためのインターフェースを提供しています。Custom Elements Everywhere [ 11 ]は、人気のあるフロントエンドフレームワークが Web Components 標準と互換性があり、すぐに使用できるかどうかを検証し、未解決のバグと利用可能な回避策の一覧を提供します。さらに、Vaadin Tutorials [ 12 ]には、これらの回避策をサンプルデモアプリや同様の関連トピックとともに効率的に使用する方法を示す専用セクションがあります。
2011年、Web ComponentsはFronteers ConferenceでAlex Russellによって初めて紹介されました。[ 13 ]
2013年に、Web Components をベースにしたライブラリであるPolymer がGoogle によってリリースされました。 [ 14 ] Polymer は、Web アプリケーションのユーザー インターフェイス用のMaterial Designの標準的な実装です。
2016年にRequireJSがJavaScriptライブラリおよびカスタム要素用のAMDローダープラグインとして導入されました。[ 15 ]
2017年、Ionic（モバイルアプリフレームワーク）チームは、Webコンポーネントを生成するJavaScriptコンパイラであるStencilJSを開発しました。 [ 16 ]
2018年にAngular 6ではAngular Elementsが導入され、AngularコンポーネントをカスタムWeb要素としてパッケージ化できるようになりました。これはWebプラットフォームAPIのWebコンポーネントセットの一部です。[ 17 ]
2018年にFirefox 63ではWeb Componentsのサポートがデフォルトで有効になり、開発者ツールもそれをサポートするように更新されました。[ 18 ]
LitElementは、2018年にGoogle Chromeチームによって、より大規模なPolymerプロジェクトの一環として開発されました。LitElementは、Webコンポーネントを作成するための軽量で使いやすいフレームワークとして設計されました。
