From 9077d80d81086b9f3f1b101fa2c7724917d52869 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 16 Jan 2022 19:40:38 +0900 Subject: Web/Web_Components を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/web_components/index.html | 218 --------------------------------- files/ja/web/web_components/index.md | 218 +++++++++++++++++++++++++++++++++ 2 files changed, 218 insertions(+), 218 deletions(-) delete mode 100644 files/ja/web/web_components/index.html create mode 100644 files/ja/web/web_components/index.md (limited to 'files') diff --git a/files/ja/web/web_components/index.html b/files/ja/web/web_components/index.html deleted file mode 100644 index dac57aa0c2..0000000000 --- a/files/ja/web/web_components/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: Web Components -slug: Web/Web_Components -tags: - - Landing - - NeedsTranslation - - TopicStub - - Web Components -translation_of: Web/Web_Components ---- -

{{DefaultAPISidebar("Web Components")}}

- -
-

Web Components は、再利用可能なカスタム要素を作成し、ウェブアプリの中で利用するための、一連のテクノロジーです。コードの他の部分から独立した、カプセル化された機能を使って実現します。 

-
- -

概念と使用法

- - - -

開発者ならご存知でしょうが、可能な限りコードを再利用することは良い考えです。しかしこれは、以前から、カスタムのマークアップ構造にとって、それほど簡単なことではありませんでした。複雑な HTML (と一連のスタイルやスクリプト) を考えてみて下さい。ときに、カスタム UI の制御をレンダリングするために、コードを書かなければなりません。それに、注意していないと、それらの制御をどう使い回すかで、ページが複雑なものになってしまいます。

- -

Web Components は、上記の問題の解決を目指しています。 Web Components は、3 つの主要な技術からなり、それらを組み合わせて、多目的なカスタム要素を作成します。カプセル化された機能を使うことで、コードの重複を恐れることなく、どこでも再利用することができます。

- - - -

Web Component を実装する基本的な流れは、以下に挙げてある通りです。

- -
    -
  1. Web Component の機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラスの文法に従って下さい。 (詳細はクラスを参照して下さい。)
    2. -
  2. 新しく作成したカスタム要素を登録します。{{domxref("CustomElementRegistry.define()")}} メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡して下さい。
    3. -
  3. 必要なら、{{domxref("Element.attachShadow()")}} メソッドを使って、Shadow DOM をカスタム要素に紐付けます。通常の DOM メソッドを使って、子要素やイベントリスナーなどをShadow DOM に追加して下さい。
    4. -
  4. 必要なら、{{htmlelement("template")}} と {{htmlelement("slot")}} を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、Shadow DOM に紐付けてください。
    5. -
  5. ページ内のお好きな場所で、通常の HTML 要素のように、カスタム要素を使って下さい。
    6. -
- -

チュートリアル

- -
-
カスタム要素を使ってみよう
-
単純な Web Component を作成するために、カスタム要素の機能の使い方を紹介したガイドラインです。それ以外にも、ライフサイクルコールバックやその他の高度な機能の中を覗いていきます。
-
Shadow DOM を使ってみよう
-
Shadow DOM の基礎を眺めるガイドラインです。 Shadow DOM を要素にどう紐付けるか、Shadow DOM ツリーにどう追加するか、どうスタイルするかなどを紹介しています。
-
テンプレートとスロットを使ってみよう
-
{{htmlelement("template")}} と {{htmlelement("slot")}} 要素を使って、再利用可能な HTML 構造体の定義と使用方法を紹介したガイドラインです。 
-
- -

リファレンス

- -

カスタム要素

- -
-
{{domxref("CustomElementRegistry")}}
-
カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素をドキュメント内で使用できるようになります。
-
{{domxref("Window.customElements")}}
-
CustomElementRegistry オブジェクトへの参照を返します。
-
Life cycle callbacks
-
カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。 -
    -
  • connectedCallback: カスタム要素がドキュメントの DOM に初めて接続したときに呼び出されます。
    • -
  • disconnectedCallback: カスタム要素がドキュメントの DOM から切断されたときに呼び出されます。
    • -
  • adoptedCallback: カスタム要素が新しいドキュメントに移動したときに呼び出されます。
    • -
  • attributeChangedCallback: カスタム要素の属性のひとつが追加、削除、もしくは変更されたときに呼び出されます。
    • -
-
-
-
    -
-
-
- -
-
カスタムビルトイン要素を作成するための拡張機能
-
-
    -
  • {{htmlattrxref("is")}} グローバル HTML 属性: 標準の HTML 要素が、カスタムビルトイン要素のように振る舞うべきかを指定できます。
    • -
  • {{domxref("Document.createElement()")}} メソッドの "is" オプション: カスタムビルトイン要素のように振る舞う標準の HTML 要素のインスタンスを作成できます。
    • -
-
-
CSS の擬似クラス
-
カスタム要素に関連する擬似クラス: -
    -
  • {{cssxref(":defined")}}: ビルトイン要素と CustomElementRegistry.define() で定義されるカスタム要素を含む、あらゆる定義済みの要素にマッチします。
    • -
  • {{cssxref(":host")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。
    • -
  • {{cssxref(":host()")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。
    • -
  • {{cssxref(":host-context()")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。
    • -
-
-
- -

Shadow DOM

- -
-
{{domxref("ShadowRoot")}}
-
Represents the root node of a shadow DOM subtree.
-
{{domxref("DocumentOrShadowRoot")}}
-
A mixin defining features that are available across document and shadow roots.
-
{{domxref("Element")}} extensions
-
Extensions to the Element interface related to shadow DOM: -
    -
  • The {{domxref("Element.attachShadow()")}} method attaches a shadow DOM tree to the specified element.
    • -
  • The {{domxref("Element.shadowRoot")}} property returns the shadow root attached to the specified element, or null if there is no shadow root attached.
    • -
-
-
Relevant {{domxref("Node")}} additions
-
Additions to the Node interface relevant to shadow DOM: -
    -
  • The {{domxref("Node.getRootNode()")}} method returns the context object's root, which optionally includes the shadow root if it is available.
    • -
  • The {{domxref("Node.isConnected")}} property returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.
    • -
-
-
{{domxref("Event")}} extensions
-
Extensions to the Event interface related to shadow DOM: -
    -
  • {{domxref("Event.composed")}}: Returns a {{jsxref("Boolean")}} which indicates whether the event will propagate across the shadow DOM boundary into the standard DOM (true), or not  (false).
    • -
  • {{domxref("Event.composedPath")}}: Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with {{domxref("ShadowRoot.mode")}} closed.
    • -
-
-
- -

HTML templates

- -
-
{{htmlelement("template")}}
-
Contains an HTML fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using JavaScript, mainly used as the basis of custom element structures. The associated DOM interface is {{domxref("HTMLTemplateElement")}}.
-
{{htmlelement("slot")}}
-
A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. The associated DOM interface is {{domxref("HTMLSlotElement")}}.
-
The slot global HTML attribute
-
Assigns a slot in a shadow DOM shadow tree to an element.
-
{{domxref("Slotable")}}
-
A mixin implemented by both {{domxref("Element")}} and {{domxref("Text")}} nodes, defining features that allow them to become the contents of an {{htmlelement("slot")}} element. The mixin defines one attribute, {{domxref("Slotable.assignedSlot")}}, which returns a reference to the slot the node is inserted in.
-
- -
-
{{domxref("Element")}} extensions
-
Extensions to the Element interface related to slots: -
    -
  • {{domxref("Element.slot")}}: Returns the name of the shadow DOM slot attached to the element.
    • -
-
-
CSS pseudo-elements
-
Pseudo-elements relating specifically to slots: -
    -
  • {{cssxref("::slotted")}}: Matches any content that is inserted into a slot.
    • -
-
-
The {{event("slotchange")}} event
-
Fired on an {{domxref("HTMLSlotElement")}} instance ({{htmlelement("slot")}} element) when the node(s) contained in that slot change.
-
- -

例

- -

web-components-examples の GitHub レポジトリに、いくつかの例を用意してあります。時間とともに、より多くの例が追加されることでしょう。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}{{Spec2('HTML WHATWG')}}{{HTMLElement("template")}} の定義です。
{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}{{Spec2('HTML WHATWG')}}HTML Custom Elements の定義です。
{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}{{Spec2('DOM WHATWG')}}Shadow DOM の定義です。
{{SpecName("HTML Imports", "", "")}}{{Spec2("HTML Imports")}}HTML Imports の最初の定義です。
{{SpecName("Shadow DOM", "", "")}}{{Spec2("Shadow DOM")}}Shadow DOM の最初の定義です。
- -

ブラウザのサポート

- - - -

一般に、

- - - -

特定の機能のブラウザでの実装状況は、上記のページを調べるようにして下さい。

- - - -

参考

- - diff --git a/files/ja/web/web_components/index.md b/files/ja/web/web_components/index.md new file mode 100644 index 0000000000..dac57aa0c2 --- /dev/null +++ b/files/ja/web/web_components/index.md @@ -0,0 +1,218 @@ +--- +title: Web Components +slug: Web/Web_Components +tags: + - Landing + - NeedsTranslation + - TopicStub + - Web Components +translation_of: Web/Web_Components +--- +

{{DefaultAPISidebar("Web Components")}}

+ +
+

Web Components は、再利用可能なカスタム要素を作成し、ウェブアプリの中で利用するための、一連のテクノロジーです。コードの他の部分から独立した、カプセル化された機能を使って実現します。 

+
+ +

概念と使用法

+ + + +

開発者ならご存知でしょうが、可能な限りコードを再利用することは良い考えです。しかしこれは、以前から、カスタムのマークアップ構造にとって、それほど簡単なことではありませんでした。複雑な HTML (と一連のスタイルやスクリプト) を考えてみて下さい。ときに、カスタム UI の制御をレンダリングするために、コードを書かなければなりません。それに、注意していないと、それらの制御をどう使い回すかで、ページが複雑なものになってしまいます。

+ +

Web Components は、上記の問題の解決を目指しています。 Web Components は、3 つの主要な技術からなり、それらを組み合わせて、多目的なカスタム要素を作成します。カプセル化された機能を使うことで、コードの重複を恐れることなく、どこでも再利用することができます。

+ + + +

Web Component を実装する基本的な流れは、以下に挙げてある通りです。

+ +
    +
  1. Web Component の機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラスの文法に従って下さい。 (詳細はクラスを参照して下さい。)
    2. +
  2. 新しく作成したカスタム要素を登録します。{{domxref("CustomElementRegistry.define()")}} メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡して下さい。
    3. +
  3. 必要なら、{{domxref("Element.attachShadow()")}} メソッドを使って、Shadow DOM をカスタム要素に紐付けます。通常の DOM メソッドを使って、子要素やイベントリスナーなどをShadow DOM に追加して下さい。
    4. +
  4. 必要なら、{{htmlelement("template")}} と {{htmlelement("slot")}} を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、Shadow DOM に紐付けてください。
    5. +
  5. ページ内のお好きな場所で、通常の HTML 要素のように、カスタム要素を使って下さい。
    6. +
+ +

チュートリアル

+ +
+
カスタム要素を使ってみよう
+
単純な Web Component を作成するために、カスタム要素の機能の使い方を紹介したガイドラインです。それ以外にも、ライフサイクルコールバックやその他の高度な機能の中を覗いていきます。
+
Shadow DOM を使ってみよう
+
Shadow DOM の基礎を眺めるガイドラインです。 Shadow DOM を要素にどう紐付けるか、Shadow DOM ツリーにどう追加するか、どうスタイルするかなどを紹介しています。
+
テンプレートとスロットを使ってみよう
+
{{htmlelement("template")}} と {{htmlelement("slot")}} 要素を使って、再利用可能な HTML 構造体の定義と使用方法を紹介したガイドラインです。 
+
+ +

リファレンス

+ +

カスタム要素

+ +
+
{{domxref("CustomElementRegistry")}}
+
カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素をドキュメント内で使用できるようになります。
+
{{domxref("Window.customElements")}}
+
CustomElementRegistry オブジェクトへの参照を返します。
+
Life cycle callbacks
+
カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。 +
    +
  • connectedCallback: カスタム要素がドキュメントの DOM に初めて接続したときに呼び出されます。
    • +
  • disconnectedCallback: カスタム要素がドキュメントの DOM から切断されたときに呼び出されます。
    • +
  • adoptedCallback: カスタム要素が新しいドキュメントに移動したときに呼び出されます。
    • +
  • attributeChangedCallback: カスタム要素の属性のひとつが追加、削除、もしくは変更されたときに呼び出されます。
    • +
+
+
+
    +
+
+
+ +
+
カスタムビルトイン要素を作成するための拡張機能
+
+
    +
  • {{htmlattrxref("is")}} グローバル HTML 属性: 標準の HTML 要素が、カスタムビルトイン要素のように振る舞うべきかを指定できます。
    • +
  • {{domxref("Document.createElement()")}} メソッドの "is" オプション: カスタムビルトイン要素のように振る舞う標準の HTML 要素のインスタンスを作成できます。
    • +
+
+
CSS の擬似クラス
+
カスタム要素に関連する擬似クラス: +
    +
  • {{cssxref(":defined")}}: ビルトイン要素と CustomElementRegistry.define() で定義されるカスタム要素を含む、あらゆる定義済みの要素にマッチします。
    • +
  • {{cssxref(":host")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。
    • +
  • {{cssxref(":host()")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。
    • +
  • {{cssxref(":host-context()")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。
    • +
+
+
+ +

Shadow DOM

+ +
+
{{domxref("ShadowRoot")}}
+
Represents the root node of a shadow DOM subtree.
+
{{domxref("DocumentOrShadowRoot")}}
+
A mixin defining features that are available across document and shadow roots.
+
{{domxref("Element")}} extensions
+
Extensions to the Element interface related to shadow DOM: +
    +
  • The {{domxref("Element.attachShadow()")}} method attaches a shadow DOM tree to the specified element.
    • +
  • The {{domxref("Element.shadowRoot")}} property returns the shadow root attached to the specified element, or null if there is no shadow root attached.
    • +
+
+
Relevant {{domxref("Node")}} additions
+
Additions to the Node interface relevant to shadow DOM: +
    +
  • The {{domxref("Node.getRootNode()")}} method returns the context object's root, which optionally includes the shadow root if it is available.
    • +
  • The {{domxref("Node.isConnected")}} property returns a boolean indicating whether or not the Node is connected (directly or indirectly) to the context object, e.g. the {{domxref("Document")}} object in the case of the normal DOM, or the {{domxref("ShadowRoot")}} in the case of a shadow DOM.
    • +
+
+
{{domxref("Event")}} extensions
+
Extensions to the Event interface related to shadow DOM: +
    +
  • {{domxref("Event.composed")}}: Returns a {{jsxref("Boolean")}} which indicates whether the event will propagate across the shadow DOM boundary into the standard DOM (true), or not  (false).
    • +
  • {{domxref("Event.composedPath")}}: Returns the event’s path (objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with {{domxref("ShadowRoot.mode")}} closed.
    • +
+
+
+ +

HTML templates

+ +
+
{{htmlelement("template")}}
+
Contains an HTML fragment that is not rendered when a containing document is initially loaded, but can be displayed at runtime using JavaScript, mainly used as the basis of custom element structures. The associated DOM interface is {{domxref("HTMLTemplateElement")}}.
+
{{htmlelement("slot")}}
+
A placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together. The associated DOM interface is {{domxref("HTMLSlotElement")}}.
+
The slot global HTML attribute
+
Assigns a slot in a shadow DOM shadow tree to an element.
+
{{domxref("Slotable")}}
+
A mixin implemented by both {{domxref("Element")}} and {{domxref("Text")}} nodes, defining features that allow them to become the contents of an {{htmlelement("slot")}} element. The mixin defines one attribute, {{domxref("Slotable.assignedSlot")}}, which returns a reference to the slot the node is inserted in.
+
+ +
+
{{domxref("Element")}} extensions
+
Extensions to the Element interface related to slots: +
    +
  • {{domxref("Element.slot")}}: Returns the name of the shadow DOM slot attached to the element.
    • +
+
+
CSS pseudo-elements
+
Pseudo-elements relating specifically to slots: +
    +
  • {{cssxref("::slotted")}}: Matches any content that is inserted into a slot.
    • +
+
+
The {{event("slotchange")}} event
+
Fired on an {{domxref("HTMLSlotElement")}} instance ({{htmlelement("slot")}} element) when the node(s) contained in that slot change.
+
+ +

例

+ +

web-components-examples の GitHub レポジトリに、いくつかの例を用意してあります。時間とともに、より多くの例が追加されることでしょう。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}{{Spec2('HTML WHATWG')}}{{HTMLElement("template")}} の定義です。
{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}{{Spec2('HTML WHATWG')}}HTML Custom Elements の定義です。
{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}{{Spec2('DOM WHATWG')}}Shadow DOM の定義です。
{{SpecName("HTML Imports", "", "")}}{{Spec2("HTML Imports")}}HTML Imports の最初の定義です。
{{SpecName("Shadow DOM", "", "")}}{{Spec2("Shadow DOM")}}Shadow DOM の最初の定義です。
+ +

ブラウザのサポート

+ + + +

一般に、

+ + + +

特定の機能のブラウザでの実装状況は、上記のページを調べるようにして下さい。

+ + + +

参考

+ + -- cgit v1.2.3-54-g00ecf