From a6dd4cb59fe3d8b533774938430bbbcb337344ba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 16:14:57 +0900 Subject: 2021/09/15 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/htmlslotelement/slotchange_event/index.md | 113 ++++++++++----------- 1 file changed, 53 insertions(+), 60 deletions(-) (limited to 'files/ja') diff --git a/files/ja/web/api/htmlslotelement/slotchange_event/index.md b/files/ja/web/api/htmlslotelement/slotchange_event/index.md index 295a4cd715..061141b5f3 100644 --- a/files/ja/web/api/htmlslotelement/slotchange_event/index.md +++ b/files/ja/web/api/htmlslotelement/slotchange_event/index.md @@ -3,81 +3,74 @@ title: 'HTMLSlotElement: slotchange イベント' slug: Web/API/HTMLSlotElement/slotchange_event tags: - Event - - Reference - - Webコンポーネント - - events - - slotchange - - イベント + - リファレンス - ウェブコンポーネント - - 仮想DOM + - イベント + - シャドウ DOM + - slotchange +browser-compat: api.HTMLSlotElement.slotchange_event translation_of: Web/API/HTMLSlotElement/slotchange_event --- -
{{APIRef}}
+{{APIRef}} -

slotchange イベントは、 {{DOMxRef("HTMLSlotElement")}} インスタンス({{HTMLElement("slot")}} 要素) において、そのスロットが含まれるノードが変更された場合に発生します。

+**`slotchange`** イベントは、 {{DOMxRef("HTMLSlotElement")}} インスタンス({{HTMLElement("slot")}} 要素) において、そのスロットに含まれるノードが変更された場合に発行されます。 -
-

メモ: スロットされたノードの子ノードが変更された場合、 slotchange イベントは発生しません。つまり実際のノード自体を変更 (例えば、追加または削除) した場合に限ります。

-
+> **Note:** スロットに入っているノードの子ノードが変更された場合、 `slotchange` イベントは発生しません。つまり実際のノード自体を変更 (例えば、追加または削除) した場合に限ります。 - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + +
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティなし
バブリングあり
キャンセル不可
インターフェイス{{DOMxRef("Event")}}
イベントハンドラープロパティなし
-

例

+**slotchange** イベントを発行させるには、 `slot` 属性を設定または削除しなければなりません。 + +## 例 + +```js +element.setAttribute('slot', slotName); +// element.assignedSlot = $slot +element.removeAttribute('slot'); +// element.assignedSlot = null +``` -

次のスニペットは、 slotchange の例から取られています (ライブも参照してください)。

+次のスニペットは、 [slotchange の例](https://github.com/mdn/web-components-examples/tree/master/slotchange)から取りました ([ライブでも確認できます](https://mdn.github.io/web-components-examples/slotchange/))。 -
let slots = this.shadowRoot.querySelectorAll('slot');
+```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 + '".');
-});
- -

ここではすべての <slot> への参照を取得し、テンプレートの2番目のスロットに slotchange イベントリスナーを追加します。この例ではコンテンツが変更されているスロットです。

- -

スロットに挿入された要素が変更されるたびに、どのスロットが変更されたか、スロット内の新しいノードが何であるかを示すレポートがコンソールに記録されます。

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName("DOM WHATWG", "#mutation-observers", '"Mutation observers" and slotchange event')}}{{Spec2("DOM WHATWG")}}初回定義
+}); +``` + +ここではすべての `` への参照を取得し、テンプレートの 2 番目のスロットに `slotchange` イベントリスナーを追加します。この例ではコンテンツが変更されているスロットです。 + +スロットに挿入された要素が変更されるたびに、どのスロットが変更されたか、スロット内の新しいノードが何であるかを示すレポートがコンソールに記録されます。 + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

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

+{{Compat}} -

関連情報

+## 関連情報 -

{{domxref("HTMLSlotElement")}}

+{{domxref("HTMLSlotElement")}} -- cgit v1.2.3-54-g00ecf