Zum Hauptinhalt springen
Shadow DOM ist eine fortgeschrittene Webentwicklungsfunktion, mit der Entwickler einen Teil der Struktur ihrer Webseite kapseln und einen separaten „Shadow”-Abschnitt erstellen können. Stellen Sie es sich vor wie das Erstellen einer Miniatur-Webseite innerhalb einer Komponente Ihrer Hauptseite. Diese „Mini-Seite” arbeitet unabhängig vom Rest Ihrer Seite und verhindert Konflikte zwischen Stilen und Skripten, die innerhalb der Komponente und denen, die auf der Hauptseite verwendet werden. Wenn Sie im Kameleoon Graphic Editor arbeiten, müssen Sie wissen, wie das DOM (Document Object Model) funktioniert, um Shadow DOM-Elemente zu verwenden. Da Shadow DOM-Elemente standardmäßig im Haupt-DOM nicht sichtbar sind, können Dinge wie das Platzieren von Widgets oder das Personalisieren von Experimenten schwieriger sein als die Arbeit mit Standard-DOM-Elementen.
Diese Funktion eignet sich am besten für diejenigen mit Entwicklungserfahrung. Wenn Sie sich beim Arbeiten mit dem DOM oder der Shadow DOM-Kapselung nicht wohl fühlen, ist es eine gute Idee, einen Entwickler zu kontaktieren oder Online-Ressourcen zu Web Components und Shadow DOM-Grundlagen zu konsultieren.

​
Einschränkungen von Standardselektoren

Standard-CSS-Selektoren oder JavaScript-Methoden wie querySelector() oder $() funktionieren nicht bei Elementen innerhalb eines Shadow DOM. Diese Elemente sind vor der Hauptseite verborgen, was bedeutet:
  • Sie können Elemente innerhalb eines Shadow DOM nicht mit den üblichen Auswahlmethoden im Kameleoon Graphic Editor anvisieren.
  • Das Anvisieren dieser Elemente mit traditionellen CSS- oder jQuery-ähnlichen Selektoren in Ihrem Experiment kann fehlschlagen.
  • Etwaige Änderungen (wie Textänderungen, Stilaktualisierungen oder Inhaltseinfügungen) werden möglicherweise nicht angewendet, sofern keine besonderen Schritte unternommen werden, um die Shadow DOM-Grenze zu überwinden.
Wenn Sie sich nicht sicher sind, ob Sie es mit einem Shadow DOM zu tun haben, untersuchen Sie das Element mit den Entwicklertools Ihres Browsers. Suchen Sie im Panel Elements nach #shadow-root.

​
Mit Shadow DOM im Graphic Editor arbeiten

In den meisten Fällen können Benutzer Elemente innerhalb eines Shadow Root direkt aus dem Vorschaubereich im Kameleoon Graphic Editor auswählen.

​
Wann das zusätzliche „Shadow root path”-Eingabefeld erscheint

In einigen Fällen, wenn Sie versuchen, ein Element innerhalb eines Shadow DOM mit dem Kameleoon Graphic Editor auszuwählen oder zu bearbeiten, sehen Sie möglicherweise ein zusätzliches Eingabefeld mit der Bezeichnung Shadow root path. Dieses Feld erscheint, wenn Kameleoon erkennt, dass das Zielelement innerhalb eines Shadow-Baums existiert und mit Standardselektoren nicht erreicht werden kann. Mit dem Shadow root path können Sie einen bestimmten Pfad durch verschachtelte Shadow DOM-Ebenen definieren, damit Kameleoon das Element während der Experimentausführung erreichen und modifizieren kann. Mock-Verbindung: Der Graphic Editor verwendet diesen Pfad, um die Verbindung zwischen dem Haupt-DOM und dem Element innerhalb des Shadow DOM zu „simulieren”, was Ihnen ermöglicht, Änderungen visuell zu bearbeiten und in der Vorschau anzuzeigen, als wäre das Element Teil der regulären Seitenstruktur.

​
Beispiele

​
Eine Schaltfläche innerhalb eines Shadow Root anvisieren

Im Kameleoon Graphic Editor können Sie Elemente innerhalb eines Shadow Root anvisieren:
  • Direkt im Vorschaubereich: Wenn das Element zugänglich ist, können Sie es in der Editor-Vorschau auswählen, wie jedes andere Standardelement.
  • Mit „Edit selector”: Für komplexere Strukturen können Sie den Selektorpfad manuell mit dem Eingabefeld Edit selector konstruieren. Verwenden Sie den Trenner ::SHADOW-ROOT::, um einen Schritt in den Shadow Root anzuzeigen.

​
Shadow DOM in DevTools inspizieren

  1. Klicken Sie mit der rechten Maustaste auf das Element > Inspect.
  2. Suchen Sie im Panel Elements unter dem benutzerdefinierten Element nach #shadow-root (open).
  3. Erweitern Sie es, um die inneren Elemente anzuzeigen.
Zum Beispiel: 
<my-element>
  #shadow-root (open)
    <button class="cta">Click me</button>
</my-element>

​
Visuelle Hinweise oder Beschriftungen in der Benutzeroberfläche

Beim Arbeiten mit Webseiten, die Shadow DOM verwenden, bietet der Kameleoon Graphic Editor mehrere visuelle Indikatoren, die Ihnen helfen zu erkennen, wann Elemente Teil eines Shadow Root sind.

​
#shadow-root im Elements-Panel

Im Elements-Panel des Editors zeigen Komponenten, die Shadow DOM verwenden, #shadow-root als Teil ihres CSS-Selektors an, was darauf hinweist, dass das Element gekapselt ist und nicht Teil des Haupt-DOM-Baums ist.

​
Feld „Shadow root path” im Selektor-Panel

Wenn Sie ein Element innerhalb eines Shadow Root auswählen, erscheint im Panel Edit CSS selector ein zusätzliches Eingabefeld Shadow root path. Mit diesem Eingabefeld können Sie einen vollständigen Pfad durch Shadow Roots mithilfe der ::SHADOW-ROOT::-Syntax erstellen.

​
Wie man einen Selektorpfad für Shadow DOM-Elemente schreibt

Beim Arbeiten mit Shadow DOM-Elementen im Graphic Editor von Kameleoon reicht ein Standard-CSS-Selektor nicht aus. Sie müssen einen Selektorpfad definieren, der den Shadow Root einschließt. Um ein Element innerhalb eines Shadow Root mit einer einzigen Ebene anzuvisieren, verwenden Sie den Trenner ::SHADOW-ROOT::: custom-element::SHADOW-ROOT::.target-button Der Trenner ::SHADOW-ROOT:: weist Kameleoon an, in den Shadow Root des angegebenen Elements einzutreten und das Anvisieren darin mit Standard-CSS-Selektoren fortzusetzen.
Kameleoon unterstützt derzeit nur die Navigation eine Ebene in das Shadow DOM. Wenn das Element in mehrere Shadow Roots verschachtelt ist, kann es derzeit nicht mit einem vollständigen Selektorpfad anvisiert werden.

​
Beispiel

<my-element>
  #shadow-root
    <button class="cta">Click me</button>
</my-element>
Ihr Selektorpfad lautet my-element::SHADOW-ROOT::.cta Dies weist Kameleoon an:
  • Das my-element-Element auszuwählen.
  • In seinen Shadow Root einzutreten.
  • Die .cta-Schaltfläche darin anzuvisieren.

​
Einschränkungen und Überlegungen

Beachten Sie beim Arbeiten mit Shadow DOM die folgenden Einschränkungen:
  • Geschlossene Shadow DOMs: Elemente in einem geschlossenen Shadow Root können nicht mit dem Graphic Editor oder Standard-JavaScript erreicht oder modifiziert werden.
  • Dynamischer oder skriptgenerierter Inhalt: Wenn Inhalte innerhalb eines Shadow Root dynamisch generiert oder aktualisiert werden, bleiben Ihre Änderungen möglicherweise nicht bestehen oder werden nicht wie erwartet wirksam.
  • Stilbeschränkungen: Von außerhalb des Shadow Root angewendete Stile wirken sich aufgrund der Stilkapselung des Shadow DOM oft nicht auf innere Elemente aus. CSS-Regeln müssen möglicherweise direkt innerhalb der internen Struktur der Komponente angewendet werden, was über den Graphic Editor nicht möglich ist.

​
Shadow Root (geschlossen)

Einige Web Components verwenden einen geschlossenen Shadow Root, was bedeutet, dass ihr internes DOM vor den Entwicklertools des Browsers und JavaScript vollständig verborgen ist. Im Gegensatz zu einem offenen Shadow Root, auf den Sie mit .shadowRoot zugreifen können, gibt ein geschlossener Shadow Root seinen Inhalt nicht über das DOM preis, was ihn unzugänglich macht für:
  • Den Graphic Editor
  • JavaScript-basiertes Targeting
  • Selektorpfade oder benutzerdefinierte Skripte
Da die internen Elemente eines geschlossenen Shadow Root verborgen sind, können Sie diese in Kameleoon nicht auswählen oder modifizieren. Auch wenn Sie die äußere Wrapper-Komponente sehen, bleibt ihre interne Struktur versiegelt.

​
Was können Sie tun?

Wenn ein wichtiges Element innerhalb eines geschlossenen Shadow Root liegt, benötigen Sie Hilfe von einem Entwickler. Er kann:
  • Die Komponente mit einem offenen Shadow Root neu erstellen.
  • Bestimmte Elemente für externes Targeting freigeben.
  • Einen Hook oder eine Lösung für das Targeting bereitstellen.
Wenn Sie das Innere einer Komponente in den Browser-DevTools nicht inspizieren können, verwendet sie wahrscheinlich einen geschlossenen Shadow Root.

​
Verschachtelte Shadow Roots

Shadow DOMs können mehrere Ebenen tief verschachtelt sein (z. B. ein Shadow Root innerhalb eines anderen Shadow Root). Dieser Fall wird in der aktuellen Version von Kameleoon nicht unterstützt.
Wenn ein Element nicht auf Bearbeitungen reagiert, überprüfen Sie noch einmal, ob es sich in einem geschlossenen Shadow Root befindet oder ob Ihnen ein Teil des Pfads fehlt.

​
Widgets zu einem Shadow Root hinzufügen

Widgets können in Shadow DOM-Elementen im Graphic Editor von Kameleoon nicht hinzugefügt werden, da der Shadow Root seinen Inhalt von den DOM-Knoten isoliert, die der Editor erreichen kann.

​
Click-Tracking aus dem Graphic Editor hinzufügen

Sie können derzeit kein Click-Tracking-Ziel direkt über den Graphic Editor für Shadow DOM-Elemente hinzufügen. Sie können jedoch eines mit der API von Kameleoon erstellen und verwalten.