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/zh-cn/web/html/element/content/index.html | 160 ++++++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 files/zh-cn/web/html/element/content/index.html (limited to 'files/zh-cn/web/html/element/content') diff --git a/files/zh-cn/web/html/element/content/index.html b/files/zh-cn/web/html/element/content/index.html new file mode 100644 index 0000000000..21f0f196cd --- /dev/null +++ b/files/zh-cn/web/html/element/content/index.html @@ -0,0 +1,160 @@ +--- +title: +slug: Web/HTML/Element/content +translation_of: Web/HTML/Element/content +--- +

{{Deprecated_header}}

+ +

HTML <content> 元素— Web 组件 的技术套件的废弃部分 — 用于 Shadow DOM 内部作为 {{glossary("insertion point")}}，并且不可用于任何正常的 HTML，现在已被 {{HTMLElement("slot")}} 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。 

+ +
+

注：虽然在规范的草案中出现，并且在多个浏览器中实现，这个元素依然会在规范的之后版本中移除。

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
内容分类透明内容
允许的内容流式内容
Tag omission{{no_tag_omission}}
允许的父元素任何接受流式内容的元素
DOM 接口{{domxref("HTMLContentElement")}}
+ +

属性

+ +

这个元素包含 全局属性。

+ +
+
select
+
逗号分隔的选择器列表，它们和 CSS 选择器语法相同。它们选择要插入的内容，来替换为 <content> 元素。
+
+ +

示例

+ +

这里是一个使用 <content> 元素的简单示例。它是个 HTML 文件，包含所有所需的东西。

+ +
+

注：为了使这个代码有效，你使用的浏览器必须支持 Web 组件，请见 Enabling Web Components in Firefox。

+
+ +
<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>
+
+ +

如果你在 Web 浏览器中展示，它应该是这样。

+ +

content example

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', "#the-content-element", "content")}}{{Spec2('Shadow DOM')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] 如果 Shadow DOM 在 Firefox 中没有开启， <content> 元素会表现为 domxref("HTMLUnknownElement")}}。Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 dom.webcomponents.enabled 背后，它默认是关闭的。

+ +

另见

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