<shadow>

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 Eltern-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 &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

Spezifikation Status Kommentar
Shadow DOM
Die Definition von 'shadow' in dieser Spezifikation.
Veraltet  

Browser Kompatibilit├Ąt

Wir konvertieren die Kompatibilit├Ątsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilit├Ątstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

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.

Siehe auch