MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Firefox での Web Components のサポート状況

これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

Web Components は、とても新しい技術で、ブラウザ実装者や Web 開発者が実際に利用した経験を集めて仕様を考案しています。実装状況は変化しやすく、次々と進化していきます。この記事は、Firefox や Firefox OS で使用されている Gecko での実装状況の一覧を示します。

ネイティブサポート

Firefox と Firefox OS では、以下の機能が実装されており、デフォルトで有効です:

今後実装予定の機能

  • 新しい同意に基づいた Shadow DOM の実装は、2016 年 Q1 にリリース予定です。AnneWilson のブログ投稿に詳細が記述されています。しかし、まだ仕様について 多くの議論や課題 があり、すべてのブラウザへの実装は将来となるでしょう。
  • Custom elements は、最初からやり直しで、ECMAScript 6 の文法を使用してリビルドする計画 (つまり、より少ないプロトタイプを基に作成) です。Apple の Ryosuke Niwa が、実装をいくつか具体化しています。
    • 古い文法は、しばらくの間、新しい文法と共に Chrome で動作するでしょう (例えば、Element.attachShadow() に対して Element.createShadowRoot())、しかし、Firefox ではネイティブでは動作しないでしょう。
  • これらの問題について、2016 年 1 月の会議 でベンダが議論するでしょう。

放棄された機能

これらの機能は、実装の検討がされており、実験的に実装されていたものもあります。今後は改良もされず、削除されるでしょう。

  • HTML imports の使用は、ES6 モジュールで開発者が何ができるかを確認することは、待って欲しいです (まだ実装されていません。バグ 568953 をご覧ください)。Firefox から削除される予定の未完了の import の実装がありました。

Firefox でポリフィルを使用する

Firefox でポリフィルを使用する際に考慮すべき注意事項があります:

  • about:configdom.webcomponents.enabled 設定を true に変更して Firefox で Web Components を有効にすると、完全でないネイティブ実装が動き始め、ポリフィルが混乱する可能性があります。
  • webcomponents.js ポリフィルを使用した Shadow DOM のポリフィルは、スタイルをカプセル化できません。そのため、スタイルは bleed through でしょう。ポリフィルを使用して構築されたサイトは、ネイティブの Shadow DOM を サポートした 環境と異なる見た目になることに注意してください。
  • Shadow DOM のポリフィルは、機能にフックするために DOM 要素のプロトタイプをリライトするため、とても動作が遅いです (ポリフィルというよりポリリプレイスです!)。
  • Shadow DOM を使用する比津町がない場合、webcomponents.js ポリフィルの webcomponents-lite.js バージョンを使用することをお勧めします。このバージョンは、Shadow DOM を使用しないポリフィルです。

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

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