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 +++++++++++----------- .../web/web_components/using_shadow_dom/index.html | 8 +++---- .../using_templates_and_slots/index.html | 26 +++++++++++----------- 3 files changed, 30 insertions(+), 30 deletions(-) (limited to 'files/ja/web/web_components') 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 の最初の定義です。 diff --git a/files/ja/web/web_components/using_shadow_dom/index.html b/files/ja/web/web_components/using_shadow_dom/index.html index 3a990d1953..78d1a05317 100644 --- a/files/ja/web/web_components/using_shadow_dom/index.html +++ b/files/ja/web/web_components/using_shadow_dom/index.html @@ -13,7 +13,7 @@ translation_of: Web/Web_Components/Using_shadow_DOM

      High-level view

      -

      この記事では DOM (Document Object Model) —ドキュメントにある要素やテキストを表現するノードによって構成された木構造 — に親しんでいる前提で説明します。例として以下の HTML フラグメントを考えます。 

      +

      この記事では DOM (Document Object Model) —ドキュメントにある要素やテキストを表現するノードによって構成された木構造 — に親しんでいる前提で説明します。例として以下の HTML フラグメントを考えます。 

      <!DOCTYPE html>
 <html>
@@ -181,7 +181,7 @@ wrapper.appendChild(info);

      カスタム要素の使用

      -

      クラスを定義すると、定義したようにカスタム要素を使用することができます。(Using custom elements)

      +

      クラスを定義すると、定義したようにカスタム要素を使用することができます。(Using custom elements)

      // Define the new element
 customElements.define('popup-info', PopUpInfo);
      @@ -212,7 +212,7 @@ shadow.appendChild(linkElem);

      参考

      diff --git a/files/ja/web/web_components/using_templates_and_slots/index.html b/files/ja/web/web_components/using_templates_and_slots/index.html index 71f1ac7ca7..016ad83ce5 100644 --- a/files/ja/web/web_components/using_templates_and_slots/index.html +++ b/files/ja/web/web_components/using_templates_and_slots/index.html @@ -106,8 +106,8 @@ document.body.appendChild(templateContent);

      これからのコードは {{htmlelement("slot")}} を {{htmlelement("template")}} と共に使用する方法の例です。以下の2点を目指す JavaScript です。

        -
      • shadow root の中で <element-details> 要素を slot を用いて作ること。
        • -
      • <element-details> 要素を、その shadow root と一緒にレンダリングされるように作ること。つまり、要素の内容が slots の中身に代入されるようになります。
        • +
      • shadow root の中で <element-details> 要素を slot を用いて作ること。
        • +
      • <element-details> 要素を、その shadow root と一緒にレンダリングされるように作ること。つまり、要素の内容が slots の中身に代入されるようになります。

      {{htmlelement("slot")}} 要素は {{htmlelement("template")}} 要素なしで使用することが可能です。例えば、 {{HTMLElement("div")}} 要素の中で宣言しても Shadow DOM で使用した場合と同様にプレースホルダーとしての役割は果たします。しかし、{{HTMLElement("template")}} 要素の中で使用する方がより一般的で実用的です。

      @@ -120,7 +120,7 @@ document.body.appendChild(templateContent);

      template をスロットと共に作る

      -

      まず最初に{{htmlelement("template")}} 要素の中に {{htmlelement("slot")}} 要素を作成し、新しい "element-details-template" と名付けたフラグメントを作ります。

      +

      まず最初に{{htmlelement("template")}} 要素の中に {{htmlelement("slot")}} 要素を作成し、新しい "element-details-template" と名付けたフラグメントを作ります。

      <template id="element-details-template">
   <style>
@@ -160,12 +160,12 @@ document.body.appendChild(templateContent);
    • <slot name="attributes">
    -
  6. {{HTMLElement("template")}} の中で各 slot は{{HTMLElement("details")}} 要素の中に実装されています。
    7. +
  7. {{HTMLElement("template")}} の中で各 slot は{{HTMLElement("details")}} 要素の中に実装されています。

    8. <template> から <element-details> 要素を作る

    -

    次に <element-details> と名付けた新しいカスタム要素を作りましょう。 上で確認した簡単な例と同様に、{{DOMXref("Element.attachShadow")}} を利用してカスタム要素に shadow root を追加します。

    +

    次に <element-details> と名付けた新しいカスタム要素を作りましょう。 上で確認した簡単な例と同様に、{{DOMXref("Element.attachShadow")}} を利用してカスタム要素に shadow root を追加します。

    customElements.define('element-details',
   class extends HTMLElement {
@@ -208,9 +208,9 @@ document.body.appendChild(templateContent);

    このコードについて以下の点に注意してください。

      -
    • ２つの <element-details> 要素が使用されており、いずれも {{htmlattrxref("slot")}} 属性を "element-name" および "description" と指定することで対応する slot を参照しています。
      • -
    • 1つ目の <element-details> 要素でのみ "attributes" と名付けられた slot を参照しています。2個目の <element-details> 要素では参照していません。
      • -
    • 1つ目の <element-details> 要素は {{HTMLElement("dl")}} 要素を用いて "attributes" と名付けられた slot を参照しています。
      • +
    • ２つの <element-details> 要素が使用されており、いずれも {{htmlattrxref("slot")}} 属性を "element-name" および "description" と指定することで対応する slot を参照しています。
      • +
    • 1つ目の <element-details> 要素でのみ "attributes" と名付けられた slot を参照しています。2個目の <element-details> 要素では参照していません。
      • +
    • 1つ目の <element-details> 要素は {{HTMLElement("dl")}} 要素を用いて "attributes" と名付けられた slot を参照しています。

    スタイルを追加する

    @@ -236,11 +236,11 @@ document.body.appendChild(templateContent);

    以下のことに着目してください。

      -
    • ドキュメント内で <element-details> 要素のインスタンスは {{HTMLElement("details")}} 要素を直接使用しませんが、 shadow root が {{HTMLElement("details")}} を生成することでレンダリングされます。
      • -
    • レンダリングされた {{HTMLElement("details")}} の出力結果で、<element-details> 要素のコンテンツは shadow root から名前付きスロットを埋め込みます。言い換えれば、<element-details> 要素のDOMツリーは shadow root のコンテンツと共に構成されます。
      • -
    • 両方の <element-details> 要素おいて、"attributes" 名前付きスロットが配置される前に、 shadow root から自動的に Attributes 見出しは自動的に追加されます。
      • -
    • 最初の <element-details> は shadow root から名前付きスロットを明示的に参照している {{HTMLElement("dl")}} 要素を持つため、{{HTMLElement("dl")}} のコンテンツは  shadow root から "attributes" 名前付きスロットを置き換えています。
      • -
    • 二つ目の <element-details> は shadow root から名前付きスロットを明示的に参照していないため、名前付きスロットのコンテンツは shadow root のデフォルトのコンテンツが埋め込まれます。
      • +
    • ドキュメント内で <element-details> 要素のインスタンスは {{HTMLElement("details")}} 要素を直接使用しませんが、 shadow root が {{HTMLElement("details")}} を生成することでレンダリングされます。
      • +
    • レンダリングされた {{HTMLElement("details")}} の出力結果で、<element-details> 要素のコンテンツは shadow root から名前付きスロットを埋め込みます。言い換えれば、<element-details> 要素のDOMツリーは shadow root のコンテンツと共に構成されます。
      • +
    • 両方の <element-details> 要素おいて、"attributes" 名前付きスロットが配置される前に、 shadow root から自動的に Attributes 見出しは自動的に追加されます。
      • +
    • 最初の <element-details> は shadow root から名前付きスロットを明示的に参照している {{HTMLElement("dl")}} 要素を持つため、{{HTMLElement("dl")}} のコンテンツは  shadow root から "attributes" 名前付きスロットを置き換えています。
      • +
    • 二つ目の <element-details> は shadow root から名前付きスロットを明示的に参照していないため、名前付きスロットのコンテンツは shadow root のデフォルトのコンテンツが埋め込まれます。