From a87edb6a4990b8b6f15e37dc0ea0106b3b1386d3 Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Wed, 2 Mar 2022 01:45:12 +0900
Subject: 2021/09/15 時点の英語版に基づき新規翻訳
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/part/index.md | 59 ++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 files/ja/web/api/element/part/index.md

diff --git a/files/ja/web/api/element/part/index.md b/files/ja/web/api/element/part/index.md
new file mode 100644
index 0000000000..ea93a70d1a
--- /dev/null
+++ b/files/ja/web/api/element/part/index.md
@@ -0,0 +1,59 @@
+---
+title: Element.part
+slug: Web/API/Element/part
+tags:
+  - API
+  - Element
+  - プロパティ
+  - リファレンス
+  - part
+browser-compat: api.Element.part
+---
+{{ ApiRef("DOM") }}
+
+**`part`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の部品識別子（すなわち `part` 属性を使用して設定されたもの）を {{domxref("DOMTokenList")}} で返します。これらはシャドウ DOM の部品を {{cssxref("::part")}} 擬似要素でスタイル付けするために使用することができます。
+
+## 構文
+
+```js
+let elementPartList = element.part
+```
+
+## 例
+
+以下は、 [shadow-part](https://mdn.github.io/web-components-examples/shadow-part/) の例から抜粋したものです。ここでは、 `part` 属性を使用してシャドウ部品を見つけ、 `part` プロパティを使用して各タブの部品識別子を変更し、タブがクリックされたときに正しいスタイルがアクティブなタブに適用されるようにしています。
+
+```js
+let tabs = [];
+let children = this.shadowRoot.children;
+
+for(let elem of children) {
+  if(elem.getAttribute('part')) {
+    tabs.push(elem);
+  }
+}
+
+tabs.forEach((tab) => {
+  tab.addEventListener('click', (e) => {
+    tabs.forEach((tab) => {
+      tab.part = 'tab';
+    })
+    e.target.part = 'tab active';
+  })
+
+  console.log(tab.part);
+})
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("::part")}}
+- {{htmlattrxref("part")}}
-- 
cgit v1.2.3-54-g00ecf