草案
このページは完成していません。

Web Components は、いくつかの独立したテクノロジーで構成されています。 Web Components は、オープンなウェブテクノロジーを使用して作成された再利用可能なユーザーインターフェイスウィジェットと考えることができます。これらはブラウザーの一部であるため、jQuery や Dojo などの外部ライブラリーは必要ありません。 HTML ページにインポートステートメントを追加するだけで、既存の Web Components をコードを記述することなく使用できます。 Web Components は、新規または今も開発中の標準ブラウザー機能を使用します。

注: これは実験的な技術です。使用するブラウザーが、Web Components をサポートしている必要があります。Firefox での Web Components の有効化を参照してください。

上記の説明は現時点ではかなりうまく機能しますが、Web Components を作成できる他の多くの要素は除外されています。Web Components を使用すると、HTML、CSS、および JavaScript を使用して実行できるほとんどのことを実行でき、簡単に再利用できる移植可能なコンポーネントにすることができます。

時折、Web Components と Google Polymerに関するいくつかの混乱があります。Polymer は、Web Components テクノロジーに基づいたフレームワークです。Polymer なしで Web Components を作成して使用できます。

Web Components は今のところすべてのブラウザーに完全に実装されているわけではありません。そのため、(2015 年 1 月時点での) ほとんどのブラウザーで今すぐに使用するには、ブラウザーの範囲を埋めるために Polyfills を使用する必要があります。 Polyfills は Google Polymer プロジェクトで利用可能です。 どのブラウザーが Web Components を実装しているかを調べるには、Are We Componentized Yet?を参照してください。

Web Components は、次の 4 つのテクノロジーで構成されています (それぞれ別々に使用できます):

Web Components 仕様では、次の項目を定義しています。

Firefox での Web Components の有効化

Web Components の機能は、Firefox ではデフォルトで無効になっています。これらを有効にするには、about:config ページに移動し、表示される警告をすべて閉じます。次に、dom.webcomponents.enabled という設定を検索し、true に設定します。

Firefox enable web components

仕様

仕様 ステータス コメント
HTML Living Standard
template element の定義
現行の標準
HTML Living Standard
custom elements の定義
現行の標準
DOM
shadow trees の定義
現行の標準
Shadow DOM 勧告改訂案
HTML Imports 草案
CSS Scoping Module Level 1 草案

ドキュメントのタグと貢献者

 このページの貢献者: momdo, albatrosary, maybe
 最終更新者: momdo,