Definieren von benutzerdefinierten Elementen unter Verwendung des Shadow DOM (Virtual DOM vs. Shadow DOM)

Ich hatte vor ein paar Tagen ein Gespräch mit einem Kollegen über JavaScript und verschiedene Web-Frameworks. Er sprach mit mir über React vs. Angular vs. Vue und benutzte immer wieder den Begriff „Shadow DOM“.

Der Kontext, in dem er es erwähnte, ließ mich glauben, dass er „Virtual DOM“ sagen wollte, also fragte ich, ob er wirklich „Virtual DOM“ oder „Shadow DOM“ sagen wollte. Seine Antwort war, dass er dachte, sie seien dasselbe. Das ist ein leichter Fehler und führte letztendlich zu einem wirklich guten Gespräch.

Um das klarzustellen, gehe ich in diesem Beitrag davon aus, dass Sie verstehen, was das DOM ist. Wenn nicht, hier ist eine Einführung. Sobald Sie das gelesen haben, werden Sie sehen, dass unsere HTML-Seite in eine baumartige Struktur zerlegt wird, die wir als Entwickler manipulieren können.

Frameworks wie React und Vue erstellen eine Abstraktion des DOM, die als „virtuelles DOM“ bezeichnet wird. Der Sinn dieser Abstraktion besteht darin, Änderungen am eigentlichen DOM zu minimieren, die zu Leistungsproblemen führen können.

Das Schatten-DOM ist etwas anderes. Das Schatten-DOM ist eine untergeordnete Baumstruktur, die nur von dem Element aus gesehen werden kann, aus dem der Baum stammt. Werfen wir einen Blick auf ein ziemlich standardmäßiges HTML-Dokument …

<!DOCTYPE html>
<html>
  <head>
    <title>Shadow DOM Example</title>
  </head>
  <body>

    <div id="content">
        </div>

  </body>
</html>

Was wir tun werden, ist zu veranschaulichen, wie das Shadow DOM verwendet werden kann, indem wir ein benutzerdefiniertes Element erstellen. Mein Entwickler-Alias ​​ist devhulk, also wie wäre es, wenn wir ein devhulk-Element erstellen, das in etwa so aussieht …

<dev-hulk></dev-hulk>

Ich werde fortfahren und das vollständige Codeprojekt unten verlinken, damit Sie es ausprobieren und herumspielen können. Im Moment brauchen wir eine Klasse, die HTMLElement erweitert …

class DH extends HTMLElement {
  constructor() {
    	let shadow = this.attatchShadow({mode: 'open'})
        ...
    }
}

Dies würden wir in unserer Einstiegspunkt-JavaScript-Datei verwenden. Jetzt wollte ich die obige Codezeile hervorheben, weil es so einfach ist, ein Shadow-DOM an ein Element anzuhängen.

Jetzt werden wir andere Elemente an den Schatten anhängen, was einfach über die normale DOM-JavaScript-API erfolgt. Das Tolle daran ist, dass, wenn wir unser benutzerdefiniertes Element im Browser aufrufen, die Elemente, die wir dem Shadow-DOM hinzugefügt haben, nicht als normale DOM-Elemente erkannt werden.

Vielleicht beginnen Sie zu sehen, wie Sie mit dem Shadow DOM ein wirklich bereichsbezogenes Styling erhalten können, anstatt sich so viele Gedanken über CSS-Klassennamen/IDs usw. machen zu müssen. Ich würde wetten, dass Vue auf diese Weise auch seine