From ec26e7a80cf56fba8b4711a59dedc6e54192fd6b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 11:31:43 +0900 Subject: 2021/10/26 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/slot/index.md | 174 +++++++++++++++----------------- 1 file changed, 83 insertions(+), 91 deletions(-) (limited to 'files') diff --git a/files/ja/web/html/element/slot/index.md b/files/ja/web/html/element/slot/index.md index 868200c5e9..5c6985e814 100644 --- a/files/ja/web/html/element/slot/index.md +++ b/files/ja/web/html/element/slot/index.md @@ -1,71 +1,84 @@ --- -title: +title: ': ウェブコンポーネントのスロット要素' slug: Web/HTML/Element/slot tags: - Element - HTML - - HTML Web Components - - Reference - - Web Components - - shadow dom + - HTML ウェブコンポーネント + - リファレンス + - ウェブコンポーネント + - シャドウ DOM - slot translation_of: Web/HTML/Element/slot --- -
{{HTMLRef}}
-

HTML の <slot> 要素 — ウェブコンポーネント技術の一部 — は、ウェブコンポーネント内で別な DOM ツリーを構築し、いっしょに表示することができる独自のマークアップを入れることができるプレイスホルダーです。

+{{HTMLRef}} + +**``** は [HTML](/ja/docs/Web/HTML) の要素 — ウェブコンポーネント技術の一部 — は、ウェブコンポーネント内で別な DOM ツリーを構築し、いっしょに表示することができる独自のマークアップを入れることができるプレイスホルダーです。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ, 記述コンテンツ
許可されている内容透過的コンテンツ
イベント{{event("slotchange")}}
タグの省略{{no_tag_omission}}
許可されている親要素Any element that accepts 記述コンテンツ
暗黙の ARIA ロール対応するロールなし
許可されている ARIA ロール許可されている role なし
DOM インターフェイス{{domxref("HTMLSlotElement")}}
+ コンテンツカテゴリー + + フローコンテンツ, + 記述コンテンツ +
許可されている内容 + 透過的コンテンツ +
イベント{{event("slotchange")}}
タグの省略{{no_tag_omission}}
許可されている親要素 + 記述コンテンツを受け付ける任意の要素 +
暗黙の ARIA ロール + 対応するロールなし +
許可されている ARIA ロール許可されている role なし
DOM インターフェイス{{domxref("HTMLSlotElement")}}
-

属性

+## 属性 + +この要素には[グローバル属性](/ja/docs/Web/HTML/Global_attributes)があります。 -

この要素にはグローバル属性があります。

+- {{htmlattrdef("name")}} -
-
{{htmlattrdef("name")}}
-
スロットの名前です。
-
名前付きスロットは、 <slot> 要素に name 属性が付きます。
-
+ - : スロットの名前です。 -

例

+ **_名前付きスロット_**は、 `` 要素に `name` 属性が付きます。 -
<template id="element-details-template">
-  <style>
+## 例
+
+```html
+
+```
 
-

-
メモ: この完全な例は、要素の詳細で実際に動作しています (ライブ実行もご覧ください)。また、テンプレートとスロットの利用にも説明があります。

-

+> **Note:** この完全な例は、 [element-details](https://github.com/mdn/web-components-examples/tree/master/element-details) で見ることができます（[ライブ実行](https://mdn.github.io/web-components-examples/element-details/)もご覧ください）。また、[テンプレートとスロットの利用](/ja/docs/Web/Web_Components/Using_templates_and_slots)にも説明があります。
 
-
仕様書

+## 仕様書
 
-
- 
-  
-   
-   
-   
-  
- 
- 
-  
-   
-   
-   
-  
-  
-   
-   
-   
-  
- 
-
仕様書状態備考
{{SpecName('HTML WHATWG','scripting.html#the-slot-element','<slot>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}{{Spec2('DOM WHATWG')}}

+{{Specifications}}
 
-
ブラウザーの互換性

+## ブラウザーの互換性
 
-
{{Compat("html.elements.slot")}}

+{{Compat}}
-- 
cgit v1.2.3-54-g00ecf