最終更新:2017-12-20 (水) 17:14:14 (2317d)  

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

↑

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?
↑

polyfill

↑

参考




検索：