MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/a3e7b5301fea

Web Components

この翻訳は不完全です。英語から この記事を翻訳 してください。

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

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

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

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

希にWebコンポーネントとGoogle Polymerに関するいくつかの混乱があります。Polymerは、Webコンポーネントテクノロジに基づいたフレームワークです。Polymerを利用しなくてもWebコンポーネントを作成して使用することができます。

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

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

Web コンポーネント仕様では、次の項目を定義しています。

FirefoxでのWebコンポーネントの有効化

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

Firefox enable web components

Specifications

Specification Status Comment
Custom Elements 草案  
WHATWG HTML Living Standard
template element の定義
現行の標準 No change
HTML5
template element の定義
勧告 Initial definition
Shadow DOM 草案  
HTML Imports 草案  
CSS Scoping Module Level 1 草案  

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

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