Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from http://developer.mozilla.org/ja/docs/Web/API/HTMLSlotElement/assignedNodes below:

HTMLSlotElement: assignedNodes() メソッド - Web API

Baseline Widely available

assignedNodes() は HTMLSlotElement インターフェイスのプロパティで、このスロットに割り当てられた一連のノードを返します。

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

assignedNodes()
assignedNodes(options)

options 省略可

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

flatten

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

ノードの配列。

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

let slots = this.shadowRoot.querySelectorAll("slot");
slots[1].addEventListener("slotchange", (e) => {
  let nodes = slots[1].assignedNodes();
  console.log(
    `Element in Slot "${slots[1].name}" changed to "${nodes[0].outerHTML}".`,
  );
});

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

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4