コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

Web Components

出典: フリー百科事典『ウィキペディア（Wikipedia）』

Web Components（ウェブコンポーネンツ）はHTML要素をコンポーネント化する技術群の総称[1]、またそれらを用いて作成されたコンポーネントである。

従来用いられていた「1つの巨大HTML、全体に適用されるCSS」を「再利用可能なコンポーネント群の組み合わせ」で実現するため、カスタム要素・Template要素・ShadowDOMを主要な技術要素として開発された。Web標準であり、すべての主要ブラウザでサポートされている。

背景

[編集]

従来のHTMLは1つのHTMLファイルで構成され、スタイルを提供するCSSはHTML全体へ適用されていた。このHTMLは別のHTMLでは再利用できず、また巨大なHTMLに対するCSSはコーディングを難しくしていた。ゆえに、プログラミング言語における関数やクラスのように、再利用可能なまとまり（コンポーネント）を実現する仕組みが求められていた。

技術

[編集]

上記の問題を解決するために、3つの主要なWeb Components技術が用いられる[2]。

  • カスタム要素: 再利用可能なまとまり（コンポーネント）としてカスタムHTML要素を定義可能にする
  • ShadowDOM: CSSの適用範囲・JavaScriptのアクセス範囲を限定し独立したコンポーネント化を可能にする[3]
  • HTMLテンプレート: HTML要素群のテンプレート化を可能にし（template要素）インスタンスへの要素注入を可能にする（slot要素）

HTMLテンプレートによってHTML要素のまとまりを作り出し、ShadowDOMによってCSS・JavaScriptを含めてまとまりを隔離し、それらがHTML内で再利用可能なようにカスタムHTML要素化する。このコンポーネントを利用する際にslot要素へ適切な要素を挿入（注入）することで、引数を用いた関数呼び出し・classインスタンス化のように、コンポーネントの振る舞いを変えることができる。

attribute-propertyリフレクション

[編集]

HTMLの要素において、attributes（content attributes）とproperty（IDL attributes）は必ずしも値がリンクしない（HTML要素 § AttributeとProperty）。Web Componentsにおいていわゆるreflectionを可能にするには、そのための仕組みが必要になる。attributesはすべて文字列と定義されており、またpropertyは暗示的に静的型を持つため、propertyの型を事前に定義しattributesへのアクセス時に適切な型変換（文字列化、定義された型へのparse）をおこなうのが基本的な仕組みになる。

特徴

[編集]

カスタム要素

[編集]

カスタム要素（Custom Elements）は、自律カスタム要素（autonomous custom elements）とカスタマイズされた組み込み要素（customized built-in elements）の2つのパートに分けられる。自律カスタム要素は、ネイティブのHTML要素とは完全に分離されたHTML要素であり、本質的にはCustom Elements APIを用いてボトムアップで構築される。カスタマイズされた組み込み要素は、ネイティブのHTML要素の上に構築され、元の機能を再利用できる[4]。

Shadow DOM

[編集]

Shadow DOMは、ウェブブラウザがDOM要素をメインのdocument DOMツリーに追加せずにレンダリングできるようにする機能である。これにより、開発者とブラウザが到達できる範囲にバリアを作ることができる。開発者はネストされた要素と同じようにはShadowDOMにアクセスできなくなる一方、ブラウザはネストされた要素と同じ方法でレンダリングとコードの修正が可能になる。CSSを特定の要素のShadow DOM内にスコープすることでHTML要素をカプセル化でき、CSSスタイルがリークして意図しない影響を他の要素に与える恐れがなくなる。これらの要素はHTMLとCSSに関してカプセル化されているが、依然としてdocument内の他の要素が受け取るイベントを発火できる[5][6]。

要素内のスコープされたサブツリーはshadow treeと呼ばれる。shadow treeがアタッチされた要素はshadow hostと呼ばれる[6]。

Shadow DOMは、リテラル要素としてアタッチするか、またはscriptを使用して、常に既存の要素と接続されていなければならない。JavaScriptでは、Shadow DOMをElement.attachShadow()を使用してアタッチする[7]。HTMLとCSSをスコープする機能は、カスタム要素の作成に不可欠である。仮にshadow DOMが存在しなければ、別の外部のカスタム要素が望まない方法で相互作用する可能性をなくすことはできない。

HTMLテンプレート

[編集]

HTMLテンプレート（HTML template）は、封印されるHTMLのチャンクを自由に挿入する手段である。HTMLテンプレートの構文は次ようになる。

<html>
    <template>
        <h1><slot name="title"></slot></h1>
        <p><slot name="description"></slot></p>
    </template>
</html>

Scriptは実行されず、テンプレート内にあるリソースは、テンプレートがスタンプアウトされるまではフェッチされない[8]。

実装

[編集]

上記のWeb Components技術はすべてWeb標準であり、すべての主要ブラウザでサポートされている。ユーティリティライブラリを含め様々な実装方法がある。

  • カスタム要素
    • customElements.define(elemName, elemClass) :GlobalのcustomElementsに登録する。第2引数はHTMLElementを継承すること[9]
      • @customElement(elemName) :LitElementライブラリのTypeScript Decorator。customElements.define()の糖衣構文[10]
  • ShadowDOM
    • Element.attachShadow() :返り値のshadow rootにぶら下がる要素を追加していく。
      • LitElement class: 暗示的にshadowDOMをrootとする
  • template要素
    • <template> : HTML内でtemplate要素を宣言し、template要素の子要素にテンプレートを記述する
  • slot要素
    • <slot> : カスタム要素の子要素を受け入れることで要素のコンポジション（合成）をカスタム要素でも可能にする

上記の方法で作成されたWeb Componentsは最終的に以下のように利用される。

<body>
    <my-element>
        <h2 slot="slot1">Hello, Web Components!!</h2>
        <span slot="slot2">This will be injected.</span>
    </my-element>
</body>

ブラウザのサポート

[編集]

Web Componentsは、すべての主要なブラウザでサポートされている[11]。

古いブラウザの後方互換性は、JavaScriptベースのpolyfill（英語版）によって実装されている。

コミュニティ

[編集]

Webコンポーネントエコシステムには多くのコミュニティの取り組みがある。WebComponents.org[12]は既存のWeb Componentsを検索するインターフェイスを提供している。Custom Elements Everywhere[13]は、有名なフロントエンドフレームワークがWeb Components標準と互換性があり使用できるようになっていることを検証し、修正街のバグと利用できるワークアラウンドを提供している。さらに、Vaadin Tutorials[14]は、これらのワークアラウンドを効果的に使用する方法をデモアプリの例と同様の関連トピックを用いて示している。

歴史

[編集]

Web ComponentsはAlex RussellがFronteers Conference 2011で初めて発表した[15]。

Polymerは、Web Componentsをベースにしたライブラリで、Googleが2013年に公開した。

Firefox 63はWeb Componentsのサポートをデフォルトで有効にし、2018年に開発者ツールがWeb Componentsをサポートするように更新した[16]。

脚注

[編集]
[脚注の使い方]
  1. ^ “Web Components”. MDN web docs. 2019年9月13日閲覧。 “Web Components は、再利用可能なカスタム要素を作成し、ウェブアプリの中で利用するための、一連のテクノロジーです。”
  2. ^ “Web Components”. MDN web docs. 2019年9月13日閲覧。
  3. ^ “Web Components”. MDN web docs. 2019年9月13日閲覧。 “要素の機能を公開せずに済み、ドキュメントの他の部分との重複を恐れることなく、スクリプト化やスタイル化できます。”
  4. ^ “Custom Elements”. www.w3.org. 2016年12月1日閲覧。
  5. ^ “What the Heck is Shadow DOM?”. Dimitri Glazkov (2011年1月15日). 2016年12月1日閲覧。
  6. ^ a b “Shadow DOM v1: Self-Contained Web Components | Web | Google Developers”. Google Developers. 2016年12月1日閲覧。
  7. ^ “Shadow DOM”. Mozilla Developer Network. 2016年12月1日閲覧。
  8. ^ Community. “Introduction to the template elements — WebComponents.org”. webcomponents.org. 2016年12月3日閲覧。
  9. ^ “CustomElementRegistry.define()”. MDN web docs. 2019年9月13日閲覧。 “Constructors for autonomous custom elements must extend HTMLElement.”
  10. ^ “decorators.ts”. Polymer/lit-element. GitHub. 2019年9月13日閲覧。
  11. ^ “webcomponents.org - Discuss & share web components” (英語). www.webcomponents.org. 2020年7月22日閲覧。
  12. ^ “Search available Web Components”. 2021年11月14日閲覧。
  13. ^ “Validate Front-end Frameworks with Web Components Standard”. 2021年11月14日閲覧。
  14. ^ “Web Components Tutorials”. 2021年11月14日閲覧。
  15. ^ “Web Components and Model Driven Views by Alex Russell · Fronteers”. fronteers.nl. 2016年12月2日閲覧。
  16. ^ “Developer Tools support for Web Components in Firefox 63”. 2021年11月14日閲覧。

外部リンク

[編集]
「https://ja-two.iwiki.icu/w/index.php?title=Web_Components&oldid=97198246」から取得