<shadow>

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

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: AndreasSchantl
 Zuletzt aktualisiert von: AndreasSchantl,