From a802ba37d66fb077a0fe4b9574839cb886135acf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 14 Sep 2021 23:04:19 +0900 Subject: Web/m-w以下の文書内のリンクURLを正規化 (#2370) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正 --- files/ja/web/web_components/index.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'files/ja/web/web_components/index.html') diff --git a/files/ja/web/web_components/index.html b/files/ja/web/web_components/index.html index 79f4bbbe10..dac57aa0c2 100644 --- a/files/ja/web/web_components/index.html +++ b/files/ja/web/web_components/index.html @@ -31,7 +31,7 @@ translation_of: Web/Web_Components

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

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

    チュートリアル

    -
    カスタム要素を使ってみよう
    +
    カスタム要素を使ってみよう
    単純な Web Component を作成するために、カスタム要素の機能の使い方を紹介したガイドラインです。それ以外にも、ライフサイクルコールバックやその他の高度な機能の中を覗いていきます。
    -
    Shadow DOM を使ってみよう
    +
    Shadow DOM を使ってみよう
    Shadow DOM の基礎を眺めるガイドラインです。 Shadow DOM を要素にどう紐付けるか、Shadow DOM ツリーにどう追加するか、どうスタイルするかなどを紹介しています。
    -
    テンプレートとスロットを使ってみよう
    +
    テンプレートとスロットを使ってみよう
    {{htmlelement("template")}} と {{htmlelement("slot")}} 要素を使って、再利用可能な HTML 構造体の定義と使用方法を紹介したガイドラインです。 
    @@ -58,7 +58,7 @@ translation_of: Web/Web_Components
    カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素をドキュメント内で使用できるようになります。
    {{domxref("Window.customElements")}}
    CustomElementRegistry オブジェクトへの参照を返します。
    -
    Life cycle callbacks
    +
    Life cycle callbacks
    カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。
    • connectedCallback: カスタム要素がドキュメントの DOM に初めて接続したときに呼び出されます。
      • @@ -85,9 +85,9 @@ translation_of: Web/Web_Components
      カスタム要素に関連する擬似クラス:
      • {{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 階層内のシャドーホストの先祖要素に一致している場合に限ります。
        • +
      • {{cssxref(":host")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。
        • +
      • {{cssxref(":host()")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。
        • +
      • {{cssxref(":host-context()")}}: 使われている CSS を含む、Shadow DOM のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。
      @@ -129,7 +129,7 @@ translation_of: Web/Web_Components
      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
      +
      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.
      @@ -173,22 +173,22 @@ translation_of: Web/Web_Components {{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}} {{Spec2('HTML WHATWG')}} - HTML Custom Elements の定義です。 + HTML Custom Elements の定義です。 {{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}} {{Spec2('DOM WHATWG')}} - Shadow DOM の定義です。 + Shadow DOM の定義です。 {{SpecName("HTML Imports", "", "")}} {{Spec2("HTML Imports")}} - HTML Imports の最初の定義です。 + HTML Imports の最初の定義です。 {{SpecName("Shadow DOM", "", "")}} {{Spec2("Shadow DOM")}} - Shadow DOM の最初の定義です。 + Shadow DOM の最初の定義です。 -- cgit v1.2.3-54-g00ecf