From 035535ba507b9e36b058bd9843242e1bcbda1be3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 18 Jan 2022 21:57:08 +0900 Subject: ウェブコンポーネント関係の Web API の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/element/slot/index.html | 60 -------------------------------- files/ja/web/api/element/slot/index.md | 60 ++++++++++++++++++++++++++++++++ 2 files changed, 60 insertions(+), 60 deletions(-) delete mode 100644 files/ja/web/api/element/slot/index.html create mode 100644 files/ja/web/api/element/slot/index.md (limited to 'files/ja/web/api/element/slot') diff --git a/files/ja/web/api/element/slot/index.html b/files/ja/web/api/element/slot/index.html deleted file mode 100644 index 188d164da6..0000000000 --- a/files/ja/web/api/element/slot/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: Element.slot -slug: Web/API/Element/slot -translation_of: Web/API/Element/slot ---- -

{{APIRef("Shadow DOM")}}

- -

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

- -

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

- -

Syntax

- -
var aString = element.slot
-element.slot = aString
-
- -

値

- -

{{domxref("DOMString")}}

- -

例

- -

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

- -

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

- -
<my-paragraph>
-  <span slot="my-text">新しいテキストを代入します</span>
-</my-paragraph>
- -

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

- -
let slottedSpan = document.querySelector('my-paragraph span')
-console.log(slottedSpan.slot); // 'my-text' と表示されます
- -

仕様

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

ブラウザ実装状況

- -
- - -

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

-
diff --git a/files/ja/web/api/element/slot/index.md b/files/ja/web/api/element/slot/index.md new file mode 100644 index 0000000000..188d164da6 --- /dev/null +++ b/files/ja/web/api/element/slot/index.md @@ -0,0 +1,60 @@ +--- +title: Element.slot +slug: Web/API/Element/slot +translation_of: Web/API/Element/slot +--- +

{{APIRef("Shadow DOM")}}

+ +

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

+ +

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

+ +

Syntax

+ +
var aString = element.slot
+element.slot = aString
+
+ +

値

+ +

{{domxref("DOMString")}}

+ +

例

+ +

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

+ +

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

+ +
<my-paragraph>
+  <span slot="my-text">新しいテキストを代入します</span>
+</my-paragraph>
+ +

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

+ +
let slottedSpan = document.querySelector('my-paragraph span')
+console.log(slottedSpan.slot); // 'my-text' と表示されます
+ +

仕様

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

ブラウザ実装状況

+ +
+ + +

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

+
-- cgit v1.2.3-54-g00ecf