Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.
Zusammenfassung
Das HTML <shadow> Element wird als shadow DOM 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 Inhalts | Transparenter Inhalt. |
|---|---|
| Zulässiger Inhalt | Flow content. |
| Tags | Keine, sowohl das Anfangs- als auch das End-Tag sind erforderlich. |
| Zulässige Elrtern-Elemente | Any element that accepts flow content. |
| DOM Schnittstelle | 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 <shadow></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.
Spezifikationen
| Spezifikation | Status | Kommentar |
|---|---|---|
| Shadow DOM Die Definition von 'shadow' in dieser Spezifikation. |
Arbeitsentwurf |
Browser Kompatibilität
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 35 | 28 (28)[1] | Nicht unterstützt | 26 | Nicht unterstützt |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 37 | 28.0 (28)[1] | Nicht unterstützt | ? | ? |
[1] Wenn Shadow DOM nicht in Firefox aktiviert ist, verhalten sich <shadow> Elemente wie HTMLUnknownElement. Shadow DOM wurde erstmals in Firefox 33 implementiert und steckt hinter der Einstellung dom.webcomponents.enabled, welche standardmäßig aktiviert ist.