2021/09/15 時点の英語版に基づき新規翻訳

1 files changed, 52 insertions, 0 deletions

diff --git a/files/ja/web/api/htmlslotelement/name/index.md b/files/ja/web/api/htmlslotelement/name/index.md
new file mode 100644
index 0000000000..11eb961613
--- /dev/null
+++ b/files/ja/web/api/htmlslotelement/name/index.md
@@ -0,0 +1,52 @@
+---
+title: HTMLSlotElement.name
+slug: Web/API/HTMLSlotElement/name
+tags:
+  - API
+  - HTMLSlotElement
+  - プロパティ
+  - リファレンス
+  - name
+  - シャドウ DOM
+browser-compat: api.HTMLSlotElement.name
+translation_of: Web/API/HTMLSlotElement/name
+---
+{{APIRef("Shadow DOM API")}}
+
+**`name`** は {{domxref("HTMLSlotElement")}} インターフェイスのプロパティで、スロットの名前を返したり、設定したりします。スロットはウェブコンポーネント内のプレイスホルダーで、ユーザーが独自のマークアップで埋めることができます。
+
+## 構文
+
+```js
+let name = htmlSlotElement.name
+htmlSlotElement.name = name
+```
+
+### 値
+
+{{domxref('DOMString','文字列',"",1)}}です。
+
+## 例
+
+以下のスニペットは、 [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 イベントリスナーを追加しています。
+
+スロットに挿入された要素が変更されるたびに、どのスロットが変更され、スロット内の新しいノードが何であるかというレポートをコンソールに記録しています。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}