From 3a3342bf3454fb6f271e6ba384f23ded5c2e2286 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 19 Jan 2022 00:13:00 +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/slot/index.md | 74 ++++++++++++++++------------------ 1 file changed, 35 insertions(+), 39 deletions(-) diff --git a/files/ja/web/api/element/slot/index.md b/files/ja/web/api/element/slot/index.md index 188d164da6..072edc360a 100644 --- a/files/ja/web/api/element/slot/index.md +++ b/files/ja/web/api/element/slot/index.md @@ -1,60 +1,56 @@ --- title: Element.slot slug: Web/API/Element/slot +tags: + - API + - Element + - プロパティ + - リファレンス + - シャドウ DOM + - slot +browser-compat: api.Element.slot translation_of: Web/API/Element/slot --- -

{{APIRef("Shadow DOM")}}

+{{APIRef("Shadow DOM")}} -

{{domxref("Element")}} インターフェースの slot プロパティは shadow DOM slot の名前を返します。

+**`slot`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素が挿入されたシャドウ DOM のスロットの名前を返します。 -

slot は、web コンポーネント の中にユーザーが任意のマークアップを代入できる要素を提供します (template と slot の使い方 により詳しい説明があります)。

+スロットは[ウェブコンポーネント](/ja/docs/Web/Web_Components)内のプレースホルダーで、ユーザーが独自のマークアップで埋めることができます（詳しくは、[テンプレートとスロットの使用](/ja/docs/Web/Web_Components/Using_templates_and_slots)をご覧ください）。 -

Syntax

+## 構文 -
var aString = element.slot
-element.slot = aString
-
+```js +var aString = element.slot +element.slot = aString +``` -

値

+### 値 -

{{domxref("DOMString")}}

+{{domxref("DOMString")}} です。 -

例

+## 例 -

templateのサンプル (実行例)では、<my-paragraph> と名付けた簡単なカスタム要素を作っています。このカスタム要素には、shadow root が付いており、my-text と名付けられた slot 要素が含まれています。

+[simple-template の例](https://github.com/mdn/web-components-examples/tree/master/simple-template) ([ライブで見る](https://mdn.github.io/web-components-examples/simple-template/)) では、`` という些細なカスタム要素の例を作りました。この要素にはシャドウルートが取り付けられ、次に `my-text` というスロットを含むテンプレートの内容を使って入力されるようになっています。 -

<my-paragraph> がドキュメントの中で利用された時、その内部で slot 属性を my-text に設定した要素を作ることで、slot の内容を変更することができます。 

+文書内で `` が使用されると、スロットは `my-text` という値を持つ [`slot`](/ja/docs/Web/HTML/Global_attributes/slot) 属性を持つ要素内に含めることによって、 slotable 要素によって生成されることになります。以下はそのような例です。 -
<my-paragraph>
-  <span slot="my-text">新しいテキストを代入します</span>
-</my-paragraph>
+```html + + 別なテキストにしましょう。 + +``` -

JavaScript ファイルで {{htmlelement("span")}} への参照を取得すると、対応する <slot> の名前を取得できます。 

+JavaScript ファイルで {{htmlelement("span")}} への参照を取得すると、対応する `` の名前が取得できます。 -
let slottedSpan = document.querySelector('my-paragraph span')
-console.log(slottedSpan.slot); // 'my-text' と表示されます
+```js +let slottedSpan = document.querySelector('my-paragraph span') +console.log(slottedSpan.slot); // 'my-text' と表示 +``` -

仕様

+## 仕様書 - - - - - - - - - - - - - -
仕様書策定状況コメント
{{SpecName('DOM WHATWG','#dom-element-slot','slot')}}{{Spec2('DOM WHATWG')}} 
+{{Specifications}} -

ブラウザ実装状況

+## ブラウザーの互換性 -
- - -

{{Compat("api.Element.slot")}}

-
+{{Compat}} -- cgit v1.2.3-54-g00ecf