From b33a735dda9ba3ca6c4efc63570ed770750cf9bf Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 16:22:27 +0900 Subject: 2022/01/07 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../web/api/htmlslotelement/assignednodes/index.md | 91 ++++++++++------------ 1 file changed, 41 insertions(+), 50 deletions(-) (limited to 'files') diff --git a/files/ja/web/api/htmlslotelement/assignednodes/index.md b/files/ja/web/api/htmlslotelement/assignednodes/index.md index 9685ff31d4..621960f1b3 100644 --- a/files/ja/web/api/htmlslotelement/assignednodes/index.md +++ b/files/ja/web/api/htmlslotelement/assignednodes/index.md @@ -4,69 +4,60 @@ slug: Web/API/HTMLSlotElement/assignedNodes tags: - API - HTMLSlotElement - - Method - - Reference - - assignedNodes - - shadow dom - メソッド + - リファレンス + - assignedNodes + - シャドウ DOM +browser-compat: api.HTMLSlotElement.assignedNodes translation_of: Web/API/HTMLSlotElement/assignedNodes --- -
{{APIRef("Shadow DOM API")}}
+{{APIRef("Shadow DOM API")}} + +`assignedNodes()` は {{domxref("HTMLSlotElement")}} インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返します。 -

assignedNodes() は {{domxref("HTMLSlotElement")}} インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返し、 flatten オプションが true に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。

+`flatten` オプションが `true` に設定されていた場合は、このスロットの子孫である他のスロットに割り当てられたノードも返します。割り当てられたノードが見つからない場合は、スロットの代替コンテンツを返します。 -

構文

+## 構文 -
var assignedNodes = HTMLSlotElement.assignedNodes(options)
+```js +HTMLSlotElement.assignedNodes() +HTMLSlotElement.assignedNodes(options) +``` -

引数

+### 引数 -
-
options {{optional_inline}}
-
返されるノードのためのオプションを設定したオブジェクトです。利用可能な値は以下のとおりです。 -
    -
  • flatten: {{jsxref('Boolean')}} 値で、利用可能な子の <slot> 要素すべてに割り当てられたノードを返すか (true)、返さないか (false) を示します。既定値は false です。
    • -
-
-
+- `options` {{optional_inline}} -

返値

+ - : 返されるノードのためのオプションを設定したオブジェクトです。利用可能な値は以下のとおりです。 -

ノードの配列。

+ - `flatten` + - : 論理値で、利用可能な子の `` 要素すべてに割り当てられたノードを返すか (`true`)、返さないか (`false`) を示します。既定値は `false` です。 -

例

+### 返値 -

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

+ノードの配列。 -
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#dom-slot-assignednodes','assignedNodes')}}{{Spec2('HTML WHATWG')}} 
- -

ブラウザーの対応

- -

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

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