it-swarm.com.de

Was ist Schattenwurzel?

In den Entwicklertools von Google Chrome wird unter #shadow-root ein <html lang="en">-Tag angezeigt. Was macht es und wofür wird es verwendet? Ich sehe es weder in Firefox noch in IE. Nur in Chrome ist dies eine Besonderheit?

Wenn ich es öffne, zeigt es <head> und <body> und einen Link neben reveal. Wenn Sie darauf klicken, zeigt es auf <head> und <body>, sonst nichts.

79
Andrew

Dies ist ein besonderer Indikator dafür, dass ein Schatten-DOM existiert. Diese gibt es schon seit Jahren, aber Entwickler haben bis vor kurzem noch keine APIs erhalten. Chrome hat diese Funktion schon länger, andere Browser holen immer noch auf. Es kann in den DevTools-Einstellungen unter "Elemente" umgeschaltet werden. Deaktivieren Sie das Kontrollkästchen "Benutzer-Agent-Schatten-DOM anzeigen". Dadurch werden zumindest intern erstellte Shadow-DOMs (wie zum Beispiel select-Elemente) ausgeblendet. Ich bin mir sofort nicht sicher, ob es sich auf vom Benutzer erstellte DOMs wie benutzerdefinierte Elemente auswirkt.

Diese kommen auch in Dingen wie iframes vor, bei denen Sie einen separaten DOM-Baum in einem anderen verschachtelt haben.

Das Shadow-DOM sagt einfach, dass ein Teil der Seite ein eigenes -DOM enthält. Stile und Skripte können innerhalb dieses Elements festgelegt werden, sodass das, was darin ausgeführt wird, nur an dieser Grenze ausgeführt wird.

Dies ist eines der wichtigsten Elemente, die für das Arbeiten von Web Components erforderlich sind. Mit dieser neuen Technologie können Entwickler ihre eigenen gekapselten Komponenten erstellen, die sie wie jedes andere HTML-Element verwenden können.

83
Garbee

Ein Beispiel für Shadow DOM: Wenn Sie ein <video>-Tag auf einer Webseite haben, wird dieses nur als ein Tag im Haupt-DOM angezeigt. Wenn Sie jedoch Shadow DOM aktivieren, wird der HTML-Player des Players (Player-DOM) angezeigt. .


 Shadow DOM


Dies wird in diesem Artikel treffend erklärt: http://webcomponents.org/articles/introduction-to-shadow-dom/

58
Rao

Bei Webkomponenten besteht ein grundlegendes Problem, das die Verwendung von aus HTML und JavaScript erstellten Widgets erschwert. 

Problem: Die DOM-Struktur innerhalb eines Widgets ist nicht vom Rest der Seite gekapselt. Diese fehlende Kapselung bedeutet, dass Ihr Dokument-Stylesheet versehentlich auf Teile im Widget angewendet werden kann. Ihr JavaScript kann versehentlich Teile im Widget ändern. Ihre IDs können sich mit den IDs im Widget überschneiden und so weiter.

Shadow DOM behebt das Problem der Einkapselung der DOM-Baumstruktur.

Wenn Sie beispielsweise ein solches Markup hatten:

<button>Hello, world!</button>
<script>
var Host = document.querySelector('button');
var root = Host.createShadowRoot();
root.textContent = 'こんにちは、影の世界!';
</script>

dann statt

Hello, world!

ihre Seite sieht aus wie

こんにちは、影の世界!

Wenn JavaScript auf der Seite nach dem textContent der Schaltfläche fragt, wird es nicht “こんにちは、影の世界!” angezeigt, sondern “Hello, world!”, da die DOM-Unterstruktur unter dem Schattenstamm gekapselt ist.

NOTE: Ich habe den obigen Inhalt von https://www.html5rocks.com/de/tutorials/webcomponents/shadowdom/ abgerufen, da er mir half, Schatten-DOM ein wenig besser zu verstehen als die Antworten bereits Hier. Ich habe hier relevante Inhalte hinzugefügt, damit es anderen hilft, aber schaue den Link für eine ausführliche Diskussion darüber an.

1
Aniket Thakur