最終更新:2017-12-20 (水) 17:14:14 (2319d)
Web Components
Top / Web Components
https://www.w3.org/standards/techs/components#w3c_all
https://developer.mozilla.org/ja/docs/Web/Web_Components
概要
- Web Components は、いくつかの独立したテクノロジーで構成されています。
- Web Components は、オープンなウェブテクノロジーを使用して作成された再利用可能なユーザーインターフェイスウィジェットと考えることができます。これらはブラウザーの一部であるため、jQuery や Dojo などの外部ライブラリーは必要ありません。 HTML ページにインポートステートメントを追加するだけで、既存の Web Components をコードを記述することなく使用できます。
Web Components は、次の 4 つのテクノロジーで構成されています
- それぞれ別々に使用できます
Custom Elements
- 独自タグをブラウザに認識させます。
HTML Templates
- 標準のテンプレート機能を提供します。
- templateタグ
Shadow DOM
- カプセル化した HTML 要素を追加できます。
- HTML/CSSにはスコープが存在しませんが、Shadow DOMがそれを解決します。
HTML Imports
- ひとつのタグで複数のリソースを読み込むことができます
- linkタグ
Web Components 仕様では、次の項目を定義しています。
- 新しい HTML 要素: <templateタグ>
- 新しい要素の関連 API インターフェイス: HTMLTemplateElement?、HTMLContentElement? (仕様から削除された) および HTMLShadowElement?
- HTMLLinkElement? インターフェイスおよび <link> 要素への拡張
- custom elements を登録するための API、document.registerElement?()、および document.createElement() ならびに document.createElementNS?() の変更
- custom element に基づくプロトタイプに、新しい「ライフサイクルコールバック」を追加できます
- デフォルトで要素をスタイル付けする新しい CSS 疑似クラス、:unresolved。
- Shadow DOM: ShadowRoot?、Element.createShadowRoot?()、Element.getDestinationInsertionPoints?()、Element.shadowRoot?
- Event インターフェイスへの拡張、Event.path?
- Document インターフェイスへの拡張
- Web Components へのスタイル:
- 新しい疑似クラス: :host、:host()、:host-context()
カスタム要素
- document.register?