From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/content/index.html | 109 +++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 files/ja/web/html/element/content/index.html (limited to 'files/ja/web/html/element/content/index.html') diff --git a/files/ja/web/html/element/content/index.html b/files/ja/web/html/element/content/index.html new file mode 100644 index 0000000000..be8758de88 --- /dev/null +++ b/files/ja/web/html/element/content/index.html @@ -0,0 +1,109 @@ +--- +title: ': シャドウ DOM のコンテンツのプレイスホルダー要素' +slug: Web/HTML/Element/content +tags: + - Deprecated + - Element + - HTML + - NeedsContent + - Reference + - Web + - Web Components +translation_of: Web/HTML/Element/content +--- +
{{Deprecated_header}}
+ +

HTML の <content> 要素は、一連のウェブコンポーネント技術の廃止された部分であり、 Shadow DOM の中で {{glossary("insertion point")}} として使われていましたが、通常の HTML で利用することは意図されていませんでした。現在では DOM の中で Shadow DOM を挿入することができる場所を作成する {{HTMLElement("slot")}} 要素に置き換えられました。

+ +
+

メモ: この要素は初期のドラフト仕様に存在し、いくつかのブラウザーで実装されていましたが、後のバージョンの仕様書から削除され、使用するべきではありません。ここで文書化しているのは、その間に書かれたコードを、新しいバージョンの仕様書で動作するように適合させるのを支援するためです。

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリー透過的コンテンツ
許可されている内容フローコンテンツ
タグの省略{{no_tag_omission}}
許可されている親要素フローコンテンツを受け入れるすべての要素。
DOM インターフェイス{{domxref("HTMLContentElement")}}
+ +

属性

+ +

この要素はグローバル属性を持ちます。

+ +
+
select
+
コンマ区切りで複数のセレクターを指定できます。これらは CSS セレクターと同じ文法です。 <content> 要素が指定された場所に挿入する内容を指定します。
+
+ +

例

+ +

以下に <content> 要素の使用例を示します。これは必要なものがすべて含まれている HTML ファイルです。

+ +
+

メモ: 以下のコードを動作させるには、ブラウザーが Web Components をサポートしている必要があります。 Firefox で Web Components を有効にするにはの記事も参照してください。

+
+ +
<html>
+  <head></head>
+  <body>
+  <!-- The original content accessed by <content> -->
+  <div>
+    <h4>My Content Heading</h4>
+    <p>My content text</p>
+  </div>
+
+  <script>
+  // Get the <div> above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the <div>
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the <p> tag.
+  shadowroot.innerHTML =
+   '<h2>Inserted Heading</h2> <content select="p"></content>';
+  </script>
+
+  </body>
+</html>
+
+ +

ブラウザーで表示した場合、以下のように表示されます。

+ +

content example

+ +

仕様書

+ +

この要素は現在、どの仕様書でも定義されていません。

+ +

ブラウザー実装状況

+ + + +

{{Compat("html.elements.content")}}

+ +

関連情報

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