Was ist der Unterschied zwischen offenem und geschlossenem Schatten-DOM-Kapselungsmodus?

Question

Ich möchte ein Shadow-DOM für ein Element erstellen, damit ich Elemente für eine Chrome-Erweiterung anzeigen kann, ohne dass die Seitenstile dies beeinflussen.

Als ich die Dokumentation für Element.createShadowRoot sah, sah ich, dass es veraltet war, also überprüfte ich Element.attachShadow. Es sagte, dass ich einen Einkapselungsmodus bereitstellen musste, aber nicht erklärte, was die verschiedenen Modi tun. Ich suchte ein wenig, aber ich konnte nichts klar finden, was den Unterschied machte.

Was ist der Unterschied zwischen den Modi und welchen sollte ich für das verwenden, was ich erreichen möchte?

Answer 1

Mit dem Modus open können Sie über die shadowRoot Eigenschaft des HTML-Elements auf das Shadow-DOM zugreifen.

Mit dem closed Modus können Sie nicht. shadowRoot wird null zurückgeben.

Sie können beide Modi für Sie erreichen möchten.

Hier ist ein detailed explanation of the differences.

Answer 2

Um die akzeptierte Antwort hinzuzufügen. Der geschlossene Modus von Shadow DOM hat den einzigen Vorteil, dass Web-Komponenten-Autoren die Flexibilität erhalten, zu entscheiden, wie (wenn überhaupt) die Schattenwurzel der Komponente verfügbar gemacht werden soll. Es ist jedoch unglaublich einfach, alle Bemühungen eines Autors zu umgehen, die Schattenwurzel zu verstecken, so dass es sich wahrscheinlich nicht lohnt, sie zu belästigen. See Open vs. Closed Shadow DOM für eine detailliertere Erklärung.