aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/web_components
diff options
context:
space:
mode:
authorMasahiro FUJIMOTO <mfujimot@gmail.com>2021-09-14 23:04:19 +0900
committerGitHub <noreply@github.com>2021-09-14 23:04:19 +0900
commita802ba37d66fb077a0fe4b9574839cb886135acf (patch)
treea31c2082387bd76072bfae45f1479bd00c5ddec1 /files/ja/web/web_components
parent57c4aff2c8160b2d5ebb7302874ba0d7f3fedf02 (diff)
downloadtranslated-content-a802ba37d66fb077a0fe4b9574839cb886135acf.tar.gz
translated-content-a802ba37d66fb077a0fe4b9574839cb886135acf.tar.bz2
translated-content-a802ba37d66fb077a0fe4b9574839cb886135acf.zip
Web/m-w以下の文書内のリンクURLを正規化 (#2370)
- /en-US へのリンクを /ja へのリンクに修正 - /ja が付いていないものに /ja を付加 - MDN内のリンクが完全URLの場合、 /ja/docs からのURLに修正
Diffstat (limited to 'files/ja/web/web_components')
-rw-r--r--files/ja/web/web_components/index.html26
-rw-r--r--files/ja/web/web_components/using_shadow_dom/index.html8
-rw-r--r--files/ja/web/web_components/using_templates_and_slots/index.html26
3 files changed, 30 insertions, 30 deletions
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
<p>Web Component を実装する基本的な流れは、以下に挙げてある通りです。</p>
<ol>
- <li>Web Component の機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラスの文法に従って下さい。 (詳細は<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">クラス</a>を参照して下さい。)</li>
+ <li>Web Component の機能を明示したクラスもしくは関数を作成します。クラスを使用するなら、ECMAScript 2015 のクラスの文法に従って下さい。 (詳細は<a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス</a>を参照して下さい。)</li>
<li>新しく作成したカスタム要素を登録します。{{domxref("CustomElementRegistry.define()")}} メソッドに、要素の名前、機能が明示されているクラスもしくは関数、またオプションでどの要素を継承するかを渡して下さい。</li>
<li>必要なら、{{domxref("Element.attachShadow()")}} メソッドを使って、Shadow DOM をカスタム要素に紐付けます。通常の DOM メソッドを使って、子要素やイベントリスナーなどをShadow DOM に追加して下さい。</li>
<li>必要なら、{{htmlelement("template")}} と {{htmlelement("slot")}} を使って、HTML テンプレートを定義します。通常の DOM メソッドを再度使って、テンプレートをクローンし、Shadow DOM に紐付けてください。</li>
@@ -41,11 +41,11 @@ translation_of: Web/Web_Components
<h2 id="チュートリアル">チュートリアル</h2>
<dl>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">カスタム要素を使ってみよう</a></dt>
+ <dt><a href="/ja/docs/Web/Web_Components/Using_custom_elements">カスタム要素を使ってみよう</a></dt>
<dd>単純な Web Component を作成するために、カスタム要素の機能の使い方を紹介したガイドラインです。それ以外にも、ライフサイクルコールバックやその他の高度な機能の中を覗いていきます。</dd>
- <dt><a href="https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM を使ってみよう</a></dt>
+ <dt><a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM を使ってみよう</a></dt>
<dd>Shadow DOM の基礎を眺めるガイドラインです。 Shadow DOM を要素にどう紐付けるか、Shadow DOM ツリーにどう追加するか、どうスタイルするかなどを紹介しています。</dd>
- <dt><a href="https://developer.mozilla.org/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットを使ってみよう</a></dt>
+ <dt><a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">テンプレートとスロットを使ってみよう</a></dt>
<dd>{{htmlelement("template")}} と {{htmlelement("slot")}} 要素を使って、再利用可能な HTML 構造体の定義と使用方法を紹介したガイドラインです。 </dd>
</dl>
@@ -58,7 +58,7 @@ translation_of: Web/Web_Components
<dd>カスタム要素に関わる機能が含まれています。中でも注目すべきは、 {{domxref("CustomElementRegistry.define()")}} メソッドで、新しいカスタム要素を登録するために用います。それにより、カスタム要素をドキュメント内で使用できるようになります。</dd>
<dt>{{domxref("Window.customElements")}}</dt>
<dd><code>CustomElementRegistry</code> オブジェクトへの参照を返します。</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt>
+ <dt><a href="/ja/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Life cycle callbacks</a></dt>
<dd>カスタム要素のクラス定義の中で定義された特別なコールバック関数で、挙動に影響を与えます。
<ul>
<li><code>connectedCallback</code>: カスタム要素がドキュメントの DOM に初めて接続したときに呼び出されます。</li>
@@ -85,9 +85,9 @@ translation_of: Web/Web_Components
<dd>カスタム要素に関連する擬似クラス:
<ul>
<li>{{cssxref(":defined")}}: ビルトイン要素と <code>CustomElementRegistry.define()</code> で定義されるカスタム要素を含む、あらゆる定義済みの要素にマッチします。</li>
- <li>{{cssxref(":host")}}: 使われている CSS を含む、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。</li>
- <li>{{cssxref(":host()")}}: 使われている CSS を含む、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。</li>
- <li>{{cssxref(":host-context()")}}: 使われている CSS を含む、<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。</li>
+ <li>{{cssxref(":host")}}: 使われている CSS を含む、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。</li>
+ <li>{{cssxref(":host()")}}: 使われている CSS を含む、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタがシャドーホストに一致している場合に限ります。</li>
+ <li>{{cssxref(":host-context()")}}: 使われている CSS を含む、<a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> のシャドーホストを選択します。 (Shadow DOM の内側からカスタム要素を選択することができます。) ただし、関数のパラメータとして渡されるセレクタが DOM 階層内のシャドーホストの先祖要素に一致している場合に限ります。</li>
</ul>
</dd>
</dl>
@@ -129,7 +129,7 @@ translation_of: Web/Web_Components
<dd>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")}}.</dd>
<dt>{{htmlelement("slot")}}</dt>
<dd>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")}}.</dd>
- <dt>The <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot">slot</a></code> global HTML attribute</dt>
+ <dt>The <code><a href="/ja/docs/Web/HTML/Global_attributes/slot">slot</a></code> global HTML attribute</dt>
<dd>Assigns a slot in a shadow DOM shadow tree to an element.</dd>
<dt>{{domxref("Slotable")}}</dt>
<dd>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.</dd>
@@ -173,22 +173,22 @@ translation_of: Web/Web_Components
<tr>
<td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
- <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a> の定義です。</td>
+ <td><a href="/ja/docs/Web/Web_Components/Using_custom_elements">HTML Custom Elements</a> の定義です。</td>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
<td>{{Spec2('DOM WHATWG')}}</td>
- <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の定義です。</td>
+ <td><a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の定義です。</td>
</tr>
<tr>
<td>{{SpecName("HTML Imports", "", "")}}</td>
<td>{{Spec2("HTML Imports")}}</td>
- <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a> の最初の定義です。</td>
+ <td><a href="/ja/docs/Web/Web_Components/HTML_Imports">HTML Imports</a> の最初の定義です。</td>
</tr>
<tr>
<td>{{SpecName("Shadow DOM", "", "")}}</td>
<td>{{Spec2("Shadow DOM")}}</td>
- <td><a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の最初の定義です。</td>
+ <td><a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> の最初の定義です。</td>
</tr>
</tbody>
</table>
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
<h2 id="High-level_view">High-level view</h2>
-<p>この記事では <a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> —ドキュメントにある要素やテキストを表現するノードによって構成された木構造 — に親しんでいる前提で説明します。例として以下の HTML フラグメントを考えます。 </p>
+<p>この記事では <a href="/ja/docs/Web/API/Document_Object_Model/Introduction">DOM (Document Object Model)</a> —ドキュメントにある要素やテキストを表現するノードによって構成された木構造 — に親しんでいる前提で説明します。例として以下の HTML フラグメントを考えます。 </p>
<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
@@ -181,7 +181,7 @@ wrapper.appendChild(info);</pre>
<h3 id="カスタム要素の使用">カスタム要素の使用</h3>
-<p>クラスを定義すると、定義したようにカスタム要素を使用することができます。(<a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a>)</p>
+<p>クラスを定義すると、定義したようにカスタム要素を使用することができます。(<a href="/ja/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a>)</p>
<pre class="brush: js">// Define the new element
customElements.define('popup-info', PopUpInfo);</pre>
@@ -212,7 +212,7 @@ shadow.appendChild(linkElem);</pre>
<h2 id="参考">参考</h2>
<ul>
- <li><a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a></li>
- <li><a href="/en-US/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li>
+ <li><a href="/ja/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a></li>
+ <li><a href="/ja/docs/Web/Web_Components/Using_templates_and_slots">Using templates and slots</a></li>
</ul>
</div>
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);</pre>
<p>これからのコードは {{htmlelement("slot")}} を {{htmlelement("template")}} と共に使用する方法の例です。以下の2点を目指す JavaScript です。</p>
<ul>
- <li><a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> の中で <strong><code>&lt;element-details&gt;</code></strong> 要素を <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を用いて作ること。</li>
- <li><strong><code>&lt;element-details&gt;</code></strong> 要素を、その <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> と一緒にレンダリングされるように作ること。つまり、要素の内容が <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slots</a> の中身に代入されるようになります。</li>
+ <li><a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> の中で <strong><code>&lt;element-details&gt;</code></strong> 要素を <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を用いて作ること。</li>
+ <li><strong><code>&lt;element-details&gt;</code></strong> 要素を、その <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> と一緒にレンダリングされるように作ること。つまり、要素の内容が <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slots</a> の中身に代入されるようになります。</li>
</ul>
<p>{{htmlelement("slot")}} 要素は {{htmlelement("template")}} 要素なしで使用することが可能です。例えば、 {{HTMLElement("div")}} 要素の中で宣言しても Shadow DOM で使用した場合と同様にプレースホルダーとしての役割は果たします。しかし、{{HTMLElement("template")}} 要素の中で使用する方がより一般的で実用的です。</p>
@@ -120,7 +120,7 @@ document.body.appendChild(templateContent);</pre>
<h3 id="template_をスロットと共に作る">template をスロットと共に作る</h3>
-<p>まず最初に{{htmlelement("template")}} 要素の中に {{htmlelement("slot")}} 要素を作成し、新しい "element-details-template" と名付けた<a href="/en-US/docs/Web/API/DocumentFragment">フラグメント</a>を作ります。</p>
+<p>まず最初に{{htmlelement("template")}} 要素の中に {{htmlelement("slot")}} 要素を作成し、新しい "element-details-template" と名付けた<a href="/ja/docs/Web/API/DocumentFragment">フラグメント</a>を作ります。</p>
<pre class="brush: html">&lt;template id="element-details-template"&gt;
  &lt;style&gt;
@@ -160,12 +160,12 @@ document.body.appendChild(templateContent);</pre>
<li><code>&lt;slot name="attributes"&gt;</code></li>
</ul>
</li>
- <li>{{HTMLElement("template")}} の中で各 <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> は{{HTMLElement("details")}} 要素の中に実装されています。</li>
+ <li>{{HTMLElement("template")}} の中で各 <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> は{{HTMLElement("details")}} 要素の中に実装されています。</li>
</ul>
<h3 id="&lt;template>_から_&lt;element-details>_要素を作る">&lt;template&gt; から &lt;element-details&gt; 要素を作る</h3>
-<p>次に <strong><code>&lt;element-details&gt;</code></strong> と名付けた新しいカスタム要素を作りましょう。 上で確認した簡単な例と同様に、{{DOMXref("Element.attachShadow")}} を利用してカスタム要素に <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> を追加します。</p>
+<p>次に <strong><code>&lt;element-details&gt;</code></strong> と名付けた新しいカスタム要素を作りましょう。 上で確認した簡単な例と同様に、{{DOMXref("Element.attachShadow")}} を利用してカスタム要素に <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> を追加します。</p>
<pre class="brush: js">customElements.define('element-details',
class extends HTMLElement {
@@ -208,9 +208,9 @@ document.body.appendChild(templateContent);</pre>
<p>このコードについて以下の点に注意してください。</p>
<ul>
- <li>2つの <strong><code>&lt;element-details&gt;</code></strong> 要素が使用されており、いずれも {{htmlattrxref("slot")}} 属性を <code>"element-name"</code> および <code>"description"</code> と指定することで対応する <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li>
- <li>1つ目の <strong><code>&lt;element-details&gt;</code></strong> 要素でのみ <code>"attributes"</code> と名付けられた <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。2個目の <code><strong>&lt;element-details</strong>&gt;</code> 要素では参照していません。</li>
- <li>1つ目の <code>&lt;<strong>element-details&gt;</strong></code> 要素は {{HTMLElement("dl")}} 要素を用いて <code>"attributes"</code> と名付けられた <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li>
+ <li>2つの <strong><code>&lt;element-details&gt;</code></strong> 要素が使用されており、いずれも {{htmlattrxref("slot")}} 属性を <code>"element-name"</code> および <code>"description"</code> と指定することで対応する <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li>
+ <li>1つ目の <strong><code>&lt;element-details&gt;</code></strong> 要素でのみ <code>"attributes"</code> と名付けられた <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。2個目の <code><strong>&lt;element-details</strong>&gt;</code> 要素では参照していません。</li>
+ <li>1つ目の <code>&lt;<strong>element-details&gt;</strong></code> 要素は {{HTMLElement("dl")}} 要素を用いて <code>"attributes"</code> と名付けられた <a href="/ja/docs/Web/HTML/Element/slot#named-slot">slot</a> を参照しています。</li>
</ul>
<h3 id="スタイルを追加する">スタイルを追加する</h3>
@@ -236,11 +236,11 @@ document.body.appendChild(templateContent);</pre>
<p>以下のことに着目してください。</p>
<ul>
- <li>ドキュメント内で <strong><code>&lt;element-details&gt;</code></strong> 要素のインスタンスは {{HTMLElement("details")}} 要素を直接使用しませんが、 <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> が {{HTMLElement("details")}} を生成することでレンダリングされます。</li>
- <li>レンダリングされた {{HTMLElement("details")}} の出力結果で、<strong><code>&lt;element-details&gt;</code></strong> 要素のコンテンツは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を埋め込みます。言い換えれば、<strong><code>&lt;element-details&gt;</code></strong> 要素のDOMツリーは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> のコンテンツと共に構成されます。</li>
- <li>両方の <strong><code>&lt;element-details&gt;</code></strong> 要素おいて、<code>"attributes"</code> 名前付きスロットが配置される前に、 <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から自動的に <strong>Attributes </strong>見出しは自動的に追加されます。</li>
- <li>最初の <strong><code>&lt;element-details&gt;</code></strong> は <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照している {{HTMLElement("dl")}} 要素を持つため、{{HTMLElement("dl")}} のコンテンツは  <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から <code>"attributes"</code> <a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を置き換えています。</li>
- <li>二つ目の <strong><code>&lt;element-details&gt;</code></strong> は <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照していないため、<a href="/en-US/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>のコンテンツは <a href="/en-US/docs/Web/API/ShadowRoot">shadow root</a> のデフォルトのコンテンツが埋め込まれます。</li>
+ <li>ドキュメント内で <strong><code>&lt;element-details&gt;</code></strong> 要素のインスタンスは {{HTMLElement("details")}} 要素を直接使用しませんが、 <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> が {{HTMLElement("details")}} を生成することでレンダリングされます。</li>
+ <li>レンダリングされた {{HTMLElement("details")}} の出力結果で、<strong><code>&lt;element-details&gt;</code></strong> 要素のコンテンツは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を埋め込みます。言い換えれば、<strong><code>&lt;element-details&gt;</code></strong> 要素のDOMツリーは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> のコンテンツと共に構成されます。</li>
+ <li>両方の <strong><code>&lt;element-details&gt;</code></strong> 要素おいて、<code>"attributes"</code> 名前付きスロットが配置される前に、 <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から自動的に <strong>Attributes </strong>見出しは自動的に追加されます。</li>
+ <li>最初の <strong><code>&lt;element-details&gt;</code></strong> は <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照している {{HTMLElement("dl")}} 要素を持つため、{{HTMLElement("dl")}} のコンテンツは  <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から <code>"attributes"</code> <a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を置き換えています。</li>
+ <li>二つ目の <strong><code>&lt;element-details&gt;</code></strong> は <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> から<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>を明示的に参照していないため、<a href="/ja/docs/Web/HTML/Element/slot#named-slot">名前付きスロット</a>のコンテンツは <a href="/ja/docs/Web/API/ShadowRoot">shadow root</a> のデフォルトのコンテンツが埋め込まれます。</li>
</ul>
<div class="hidden">