From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/html/element/shadow/index.html | 159 ++++++++++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/de/web/html/element/shadow/index.html (limited to 'files/de/web/html/element/shadow/index.html') diff --git a/files/de/web/html/element/shadow/index.html b/files/de/web/html/element/shadow/index.html new file mode 100644 index 0000000000..4072f6237b --- /dev/null +++ b/files/de/web/html/element/shadow/index.html @@ -0,0 +1,159 @@ +--- +title: +slug: Web/HTML/Element/Shadow +translation_of: Web/HTML/Element/shadow +--- +

Zusammenfassung

+ +

Das HTML <shadow> Element wird als shadow DOM {{glossary("insertion point")}} genutzt. Es kann eventuell gesehen werden, wenn mehrerere shadow roots unter einem shadow host erstellt wurden. Es wird mit Web Components genutzt.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Kategorien des InhaltsTransparenter Inhalt.
Zulässiger InhaltFlow content.
Tags{{no_tag_omission}}
Zulässige Eltern-ElementeAny element that accepts flow content.
DOM Schnittstelle{{domxref("HTMLShadowElement")}}
+ +

Attribute

+ +

Dieses Element inkludiert die Globalen Attribute.

+ +

Beispiel

+ +

Hier ist ein einfaches Beispiel, welches das <shadow> Element verwendet. Es ist eine HTML-Datei mit allem was benötigt wird.

+ +
+

Notiz: Dies ist eine experimentelle Technologie. Damit dieser Code funktioniert muss ihr Browser Web Components unterstützen.  Aktivieren von Web Components in Firefox.

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

Das obige Beispiel sollte folgendes anzeigen.

+ +

shadow example

+ +

Spezifikationen

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

Browser Kompatibilität

+ +

{{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] Wenn Shadow DOM nicht in Firefox aktiviert ist, verhalten sich <shadow> Elemente wie {{domxref("HTMLUnknownElement")}}. Shadow DOM wurde erstmals in Firefox 33 implementiert und steckt hinter der Einstellung dom.webcomponents.enabled, welche standardmäßig aktiviert ist.

+ +

Siehe auch

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