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

{{obsolete_header}}

+ +

HTML <shadow> 元素 — Web 组件技术套件的废弃部分 — 目的是用作 Shadow DOM {{glossary("insertion point")}}。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。在正常的 HTML 没有任何用处。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
内容分类透明内容
允许的内容流式内容
标签省略{{no_tag_omission}}
允许的父元素任何接受流式内容的元素     
允许的 ARIA 角色无
DOM 接口{{domxref("HTMLShadowElement")}}
+ +

属性

+ +

这个元素支持 全局属性。

+ +

示例

+ +

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

+ +
+

注：这是个实验性的技术。为了使这个代码有效，你使用的浏览器必须支持 Web 组件。请见在 Firefox 中开启 Web 组件。

+
+ +
<html>
+  <head></head>
+  <body>
+
+  <!-- This <div> will hold the shadow roots. -->
+  <div>
+    <!-- This heading will not be displayed -->
+    <h4>My Original Heading</h4>
+  </div>
+
+  <script>
+    // Get the <div> above with its content
+    var origContent = document.querySelector('div');
+    // Create the first shadow root
+    var shadowroot1 = origContent.createShadowRoot();
+    // Create the second shadow root
+    var shadowroot2 = origContent.createShadowRoot();
+
+    // Insert something into the older shadow root
+    shadowroot1.innerHTML =
+      '<p>Older shadow root inserted by
+          &lt;shadow&gt;</p>';
+    // Insert into younger shadow root, including <shadow>.
+    // The previous markup will not be displayed unless
+    // <shadow> is used below.
+    shadowroot2.innerHTML =
+      '<shadow></shadow> <p>Younger shadow
+       root, displayed because it is the youngest.</p>';
+  </script>
+
+  </body>
+</html>
+
+ +

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

+ +

shadow example

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Shadow DOM', "#the-shadow-element", "shadow")}}{{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] 如果 Firefox 上没有开启 Shadow DOM， <shadow> 元素会表现为 {{domxref("HTMLUnknownElement")}}，Shadow DOM 首先在 Firefox 33 中实现，并且在首选项 dom.webcomponents.enabled 背后，它默认是关闭的。

+ +

另见

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