Was ist Schattenwurzel?

98

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

Wenn ich es öffne, wird es angezeigt <head>und <body>und ein Link neben benannt reveal, durch Klicken, zeigt es auf die<head> und <body>nichts anderes.

html google-chrome dom google-chrome-devtools Andrew
quelle

Antworten:

97

Dies ist ein spezieller Indikator für ein Shadow DOM vorhanden ist. Diese existieren seit Jahren, aber Entwickler haben bis vor kurzem noch nie APIs erhalten. Chrome hat diese Funktionalität schon eine Weile, andere Browser holen immer noch auf. Sie kann in den DevTools-Einstellungen im Abschnitt "Elemente" umgeschaltet werden. Deaktivieren Sie das Kontrollkästchen "User Agent Shadow DOM anzeigen". Dadurch werden zumindest alle intern erstellten Schatten-DOMs (wie ausgewählte Elemente) ausgeblendet. Ich bin mir nicht sicher, ob sie vom Benutzer erstellte Elemente wie benutzerdefinierte Elemente betreffen.

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

Das Schatten-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 Stücke , die für Web - Komponenten an der Arbeit. Dies ist eine neue Technologie, mit der Entwickler ihre eigenen gekapselten Komponenten erstellen können, die Entwickler wie jedes andere HTML-Element verwenden können.

Garbee
quelle
Das ist also eine offensichtliche Frage, wie diese erstellten benutzerdefinierten Elemente oder Webkomponenten für ein Projekt verwendet werden können.
Angenommen
62

Wenn Sie als Beispiel für Shadow DOM ein <video>Tag auf einer Webseite haben, wird es nur als ein Tag im Haupt-DOM angezeigt. Wenn Sie jedoch Shadow DOM aktivieren, können Sie den HTML-Code (Player DOM) des Video-Players anzeigen.

Schatten DOM

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

Nagendra Rao
quelle
Ich erhalte eine Sicherheitswarnung von Firefox, wenn ich dem Link webcomponents.org folge, einer Art Zertifikatproblem.
Sebastian Norr
1
Ja, es sieht so aus, als müsste das SSL-Zertifikat erneuert werden. Sie können die Site weiterhin anzeigen, indem Sie die Warnung ignorieren.
Nagendra Rao
5

Bei Webkomponenten gibt es ein grundlegendes Problem, das die Verwendung von Widgets aus HTML und JavaScript schwierig macht.

Problem : Der DOM-Baum in einem Widget ist nicht vom Rest der Seite gekapselt. Dieser Mangel an Kapselung bedeutet, dass Ihr Dokument-Stylesheet möglicherweise versehentlich auf Teile im Widget angewendet wird. Ihr JavaScript kann versehentlich Teile im Widget ändern. Ihre IDs überschneiden sich möglicherweise mit IDs im Widget usw.

Shadow DOM behebt das Problem der DOM-Baumkapselung .

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

こんにちは、影の世界!

Nicht nur das, wenn JavaScript auf der Seite nach dem Textinhalt der Schaltfläche fragt, wird es nicht abgerufen “こんにちは、影の世界!”, sondern auch, “Hello, world!” weil der DOM-Teilbaum unter der Schattenwurzel gekapselt ist .

HINWEIS : Ich habe den oben genannten Inhalt von https://www.html5rocks.com/de/tutorials/webcomponents/shadowdom/ aufgegriffen, da er mir geholfen hat, Shadow DOM ein wenig besser zu verstehen als die Antworten, die hier bereits vorliegen. Ich habe hier relevante Inhalte hinzugefügt, damit sie anderen helfen, aber schauen Sie sich den Link an, um eine ausführliche Diskussion darüber zu erhalten.

Aniket Thakur
quelle