From a4ccd5153b7f89fb6ec84eb114b487fbc77dfa9e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 16:51:26 +0900 Subject: 2022/01/07 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlslotelement/index.md | 87 +++++++++++++++---------------- 1 file changed, 42 insertions(+), 45 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/htmlslotelement/index.md b/files/ja/web/api/htmlslotelement/index.md index 9cd32b0ce9..87a2d23f3d 100644 --- a/files/ja/web/api/htmlslotelement/index.md +++ b/files/ja/web/api/htmlslotelement/index.md @@ -1,61 +1,58 @@ --- title: HTMLSlotElement slug: Web/API/HTMLSlotElement +tags: + - API + - HTMLSlotElement + - インターフェイス + - リファレンス + - シャドウ DOM +browser-compat: api.HTMLSlotElement translation_of: Web/API/HTMLSlotElement --- -

{{APIRef('Web Components')}}

+{{APIRef('Web Components')}} -

HTMLSlotElement は Shadow DOM API のインターフェイスで、 {{HTMLElement("slot")}} 要素の名前とこの要素に割り当てられたノードにアクセスできます。

+**`HTMLSlotElement`** は [Shadow DOM API](/en-US/docs/Web/Web_Components/Using_shadow_DOM) のインターフェイスで、 HTML の {{HTMLElement("slot")}} 要素の名前と割り当てられたノードにアクセスできるようにします。 -

プロパティ

+## プロパティ -
-
{{domxref('HTMLSlotElement.name')}}
-
{{domxref("DOMString")}}: スロットの名前を取得または設定する際に使えます。
-
+- {{domxref('HTMLSlotElement.name')}} + - : {{domxref("DOMString","文字列","",1)}}で、スロットの名前を取得または設定するために使用します。 -

メソッド

+## メソッド -
-
{{domxref('HTMLSlotElement.assignedNodes()')}}
-
このスロットに割り当てられた一連のノードを返し、 flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。
-
{{domxref('HTMLSlotElement.assignedElements()')}}
-
このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。 flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。
-
+- {{domxref('HTMLSlotElement.assign()')}} + - : このスロットに手動で割り当てられたノードを、指定されたノードに設定します。 +- {{domxref('HTMLSlotElement.assignedNodes()')}} + - : このスロットに割り当てられた一連のノードを返し、 `flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。 +- {{domxref('HTMLSlotElement.assignedElements()')}} + - : このスロットに割り当てられた一連の要素を返します (それ以外のノードは返しません)。 `flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられた要素も返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。 -

例

+## イベント -

以下のスニペットは、 slotchange の例 (ライブで確認) からとりました。

+- {{domxref('HTMLSlotElement.slotchange_event', 'slotchange')}} + - : スロットに含まれるノードが変更されたときに `HTMLSlotElement` インスタンス ([``](/en-US/docs/Web/HTML/Element/slot " は HTML の要素 — ウェブコンポーネント技術の一部 — は、ウェブコンポーネント内で別な DOM ツリーを構築し、いっしょに表示することができる独自のマークアップを入れることができるプレイスホルダーです。") 要素) に発生します。 -
let slots = this.shadowRoot.querySelectorAll('slot');
+## 例
+
+以下のスニペットは、 [slotchange の例](https://github.com/mdn/web-components-examples/tree/master/slotchange)からとりました  ([ライブでも確認](https://mdn.github.io/web-components-examples/slotchange/))。
+
+```js
+let slots = this.shadowRoot.querySelectorAll('slot');
 slots[1].addEventListener('slotchange', function(e) {
   let nodes = slots[1].assignedNodes();
   console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
-});
- -

ここではすべてのスロットの参照を取得し、テンプレート内の2番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。

- -

スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG','scripting.html#htmlslotelement','HTMLSlotElement')}}{{Spec2('HTML WHATWG')}} 
- -

ブラウザーの対応

- -

{{Compat("api.HTMLSlotElement")}}

+}); +``` + +ここではすべてのスロットの参照を取得し、テンプレート内の 2 番目のスロットに slotchange イベントリスナーを追加します。 — これが例の中でコンテンツの変更を追跡します。 + +スロットの変更の中で要素が挿入されるたびに、コンソールにどのスロットが変更されたか、スロット内の新しいノードは何であるかをログ出力します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -- cgit v1.2.3-54-g00ecf