From a328430adc2df0a25a2a72c9a61ec92e6d7e62d9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 30 Sep 2024 22:45:30 +0900 Subject: [PATCH] =?UTF-8?q?2023/07/07=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=96=B0=E8=A6=8F=E7=BF=BB=E8=A8=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/shadowroot/slotassignment/index.md | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 files/ja/web/api/shadowroot/slotassignment/index.md diff --git a/files/ja/web/api/shadowroot/slotassignment/index.md b/files/ja/web/api/shadowroot/slotassignment/index.md new file mode 100644 index 00000000000000..b73461d7b895de --- /dev/null +++ b/files/ja/web/api/shadowroot/slotassignment/index.md @@ -0,0 +1,57 @@ +--- +title: "ShadowRoot: slotAssignment プロパティ" +short-title: slotAssignment +slug: Web/API/ShadowRoot/slotAssignment +l10n: + sourceCommit: acfe8c9f1f4145f77653a2bc64a9744b001358dc +--- + +{{APIRef("Shadow DOM")}} + +**`slotAssignment`** は {{domxref("ShadowRoot")}} インターフェイスの読み取り専用プロパティで、このシャドウ DOM ツリーのスロット割り当てモードを返します。ノードは自動的に割り当て (`named`) されるか、手動で割り当て (`manual`) されます。このプロパティの値は、`slotAssignment` オプションを {{domxref("Element.attachShadow()")}} を呼び出す際に使用して定義されます。 + +## 値 + +文字列で、以下のどちらかです。 + +- `named` + - : 要素は自動的にこのシャドウルート内の {{HTMLElement("slot")}} 要素に割り当てられます。ホストの子孫要素で、このシャドウルート内の `` の `name` 属性と一致する `slot` 属性を持つものは、そのスロットに割り当てられます。ホストの最上位の子要素で、`slot` 属性を持たないものは、`name` 属性を持たない ``（「既定のスロット」）に割り当てられます。ただし、そのような `` が存在する場合に限ります。 +- `manual` + - : 要素は自動的に {{HTMLElement("slot")}} 要素に割り当てられるわけではありません。代わりに、{{domxref("HTMLSlotElement.assign()")}} を使用して手動で割り当てる必要があります。 + +## 例 + +以下の例では、`assign()` メソッドを使用して、タブ付きアプリケーションで正しいタブを表示します。この関数は、表示するパネルを渡されて呼び出され、その後スロットに割り当てられます。 `slotAssignment` が `named` であるかどうかをテストし、{{domxref("HTMLSlotElement.assign()")}} が呼び出された際に例外が発生しないようにします。 + +```js +function UpdateDisplayTab(elem, tabIdx) { + const shadow = elem.shadowRoot; + + // 通常、このテストは必要ありませんが、デバッグ時に役立つことがあります。 + if (shadow.slotAssignment === "named") { + console.error( + "自動割り当て（名前付き）スロットに手動で割り当てようとしています", + ); + } + const slot = shadow.querySelector("slot"); + const panels = elem.querySelectorAll("tab-panel"); + if (panels.length && tabIdx && tabIdx <= panels.length) { + slot.assign(panels[tabIdx - 1]); + } else { + slot.assign(); + } +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{domxref("Element.attachShadow()")}} +- {{domxref("HTMLSlotElement.assign()")}}