Passer au contenu principal
Le Shadow DOM est une fonctionnalité avancée du développement web qui permet aux développeurs d’encapsuler une partie de la structure de leur page web, créant une section « shadow » distincte. Imaginez cela comme la création d’une page web miniature au sein d’un composant de votre site principal. Cette « mini-page » fonctionne indépendamment du reste de votre page, empêchant les conflits entre les styles et scripts utilisés au sein du composant et ceux utilisés sur la page principale. Si vous travaillez dans le Graphic editor de Kameleoon, vous devrez savoir comment fonctionne le DOM (Document Object Model) pour utiliser des éléments Shadow DOM. Comme les éléments Shadow DOM ne sont pas visibles par défaut dans le DOM principal, des choses comme placer des widgets ou personnaliser des expériences peuvent être plus complexes que de travailler avec des éléments DOM standard.
Cette fonctionnalité convient mieux à ceux qui ont une expérience en développement. Si vous n’êtes pas à l’aise avec le DOM ou l’encapsulation Shadow DOM, il est judicieux de faire appel à un développeur ou de consulter des ressources en ligne sur les Web Components et les fondamentaux du Shadow DOM.

​
Limitation des sélecteurs standard

Les sélecteurs CSS standard ou les méthodes JavaScript comme querySelector() ou $() ne fonctionneront pas sur les éléments à l’intérieur d’un Shadow DOM. Ces éléments sont cachés de la page principale, ce qui signifie :
  • Vous ne pouvez pas cibler les éléments à l’intérieur d’un Shadow DOM en utilisant les méthodes de sélection habituelles dans le Graphic editor de Kameleoon.
  • Cibler ces éléments en utilisant des sélecteurs CSS traditionnels ou de style jQuery dans votre expérience peut échouer.
  • Toutes les modifications (comme les changements de texte, les mises à jour de style ou l’insertion de contenu) peuvent ne pas s’appliquer sans étapes spéciales pour franchir la frontière Shadow DOM.
Si vous n’êtes pas sûr de travailler avec un Shadow DOM, inspectez l’élément à l’aide des outils de développement de votre navigateur. Recherchez #shadow-root dans le panneau Elements.

​
Travailler avec Shadow DOM dans le Graphic editor

Dans la plupart des cas, les utilisateurs peuvent sélectionner directement les éléments à l’intérieur d’un shadow root depuis la zone d’aperçu du Graphic editor de Kameleoon.

​
Quand le champ supplémentaire « Shadow root path » apparaît

Dans certains cas, lorsque vous tentez de sélectionner ou de modifier un élément à l’intérieur d’un Shadow DOM à l’aide du Graphic editor de Kameleoon, vous pouvez voir un champ de saisie supplémentaire intitulé Shadow root path. Ce champ apparaît lorsque Kameleoon détecte que l’élément cible existe dans une arborescence shadow et ne peut pas être accédé via des sélecteurs standard. Le Shadow root path vous permet de définir un chemin spécifique à travers les couches Shadow DOM imbriquées afin que Kameleoon puisse atteindre et modifier l’élément lors de l’exécution de l’expérience. Connexion mock : le Graphic editor utilise ce chemin pour « simuler » la connexion entre le DOM principal et l’élément à l’intérieur du Shadow DOM, ce qui vous permet de modifier visuellement et de prévisualiser les changements comme si l’élément faisait partie de la structure normale de la page.

​
Exemples

​
Cibler un bouton à l’intérieur d’un shadow root

Dans le Graphic editor de Kameleoon, vous pouvez cibler les éléments à l’intérieur d’un shadow root :
  • Directement dans la zone d’aperçu : si l’élément est accessible, vous pouvez le sélectionner dans l’aperçu de l’éditeur, comme n’importe quel élément standard.
  • À l’aide de « Edit selector » : pour des structures plus complexes, vous pouvez construire manuellement le chemin de sélecteur à l’aide du champ de saisie Edit selector. Utilisez le séparateur ::SHADOW-ROOT:: pour indiquer une étape dans le shadow root.

​
Inspecter le Shadow DOM dans les DevTools

  1. Cliquez avec le bouton droit sur l’élément > Inspect.
  2. Dans le panneau Elements, recherchez #shadow-root (open) sous l’élément personnalisé.
  3. Développez-le pour afficher les éléments internes.
Par exemple : 
<my-element>
  #shadow-root (open)
    <button class="cta">Click me</button>
</my-element>

​
Indices visuels ou libellés dans l’interface

Lorsque vous travaillez avec des pages web qui utilisent le Shadow DOM, le Graphic editor de Kameleoon fournit plusieurs indicateurs visuels pour vous aider à identifier quand les éléments font partie d’un shadow root.

​
#shadow-root dans le panneau Elements

Dans le panneau Elements de l’éditeur, les composants qui utilisent Shadow DOM afficheront #shadow-root dans leur sélecteur CSS, ce qui indique que l’élément est encapsulé et ne fait pas partie de l’arborescence DOM principale.

​
Champ « Shadow root path » dans le panneau de sélecteur

Lors de la sélection d’un élément à l’intérieur d’un shadow root, un champ de saisie supplémentaire Shadow root path apparaît dans le panneau Edit CSS selector. Ce champ vous permet de construire un chemin complet à travers les shadow roots en utilisant la syntaxe ::SHADOW-ROOT::.

​
Comment écrire un chemin de sélecteur pour les éléments Shadow DOM

Lorsque vous travaillez avec des éléments Shadow DOM dans le Graphic editor de Kameleoon, un sélecteur CSS standard n’est pas suffisant. Vous devez définir un chemin de sélecteur qui inclut le shadow root. Pour cibler un élément à l’intérieur d’un shadow root à un seul niveau, utilisez le séparateur ::SHADOW-ROOT:: : custom-element::SHADOW-ROOT::.target-button Le séparateur ::SHADOW-ROOT:: indique à Kameleoon d’entrer dans le shadow root de l’élément spécifié et de continuer le ciblage à l’intérieur en utilisant des sélecteurs CSS standard.
Kameleoon ne prend actuellement en charge la navigation que sur un niveau dans le shadow DOM. Si l’élément est imbriqué dans plusieurs shadow roots, il ne peut pas être ciblé à l’aide d’un chemin de sélecteur complet à ce stade.

​
Exemple

<my-element>
  #shadow-root
    <button class="cta">Click me</button>
</my-element>
Votre chemin de sélecteur sera my-element::SHADOW-ROOT::.cta Cela indique à Kameleoon de :
  • Sélectionner l’élément my-element.
  • Entrer dans son shadow root.
  • Cibler le bouton .cta à l’intérieur.

​
Limitations et considérations

Lorsque vous travaillez avec Shadow DOM, gardez à l’esprit les limitations suivantes :
  • Shadow DOMs fermés : les éléments dans un shadow root fermé ne peuvent pas être accédés ni modifiés à l’aide du Graphic editor ou de JavaScript standard.
  • Contenu dynamique ou généré par script : si le contenu à l’intérieur d’un shadow root est généré ou mis à jour dynamiquement, vos modifications peuvent ne pas persister ou ne pas prendre effet comme prévu.
  • Restrictions de style : les styles appliqués depuis l’extérieur du shadow root n’affecteront souvent pas les éléments internes en raison de l’encapsulation de style du Shadow DOM. Les règles CSS peuvent devoir être appliquées directement dans la structure interne du composant, ce qui n’est pas possible via le Graphic editor.

​
Shadow root (fermé)

Certains web components utilisent un shadow root fermé, ce qui signifie que leur DOM interne est complètement caché des outils de développement du navigateur et de JavaScript. Contrairement à un shadow root ouvert, auquel vous pouvez accéder via .shadowRoot, un shadow root fermé n’expose pas son contenu via le DOM, ce qui le rend inaccessible à :
  • Le Graphic editor
  • Le ciblage basé sur JavaScript
  • Les chemins de sélecteur ou scripts personnalisés
Étant donné que les éléments internes d’un shadow root fermé sont cachés, vous ne pouvez pas les sélectionner ni les modifier dans Kameleoon. Même si vous voyez le composant wrapper externe, sa structure interne reste scellée.

​
Que pouvez-vous faire ?

Si un élément clé se trouve dans un shadow root fermé, vous aurez besoin de l’aide d’un développeur. Il peut :
  • Reconstruire le composant en utilisant un shadow root ouvert.
  • Exposer des éléments spécifiques pour un ciblage externe.
  • Fournir un hook ou une solution de contournement pour le ciblage.
Si vous ne pouvez pas inspecter l’intérieur d’un composant dans les DevTools du navigateur, il utilise probablement un shadow root fermé.

​
Shadow roots imbriqués

Les Shadow DOMs peuvent être imbriqués sur plusieurs niveaux de profondeur (par exemple, un shadow root à l’intérieur d’un autre shadow root). Ce cas n’est pas pris en charge dans la version actuelle de Kameleoon.
Si un élément ne répond pas aux modifications, vérifiez s’il se trouve dans un shadow root fermé ou s’il manque une partie du chemin.

​
Ajouter des widgets à un shadow root

Les widgets ne peuvent pas être ajoutés à l’intérieur des éléments Shadow DOM dans le Graphic editor de Kameleoon, car le Shadow root isole son contenu des nœuds DOM que l’éditeur peut atteindre.

​
Ajouter un suivi de clic depuis le Graphic editor

Vous ne pouvez actuellement pas ajouter un objectif de suivi de clic directement depuis le Graphic editor pour les éléments Shadow DOM. Cependant, vous pouvez en créer et en gérer un à l’aide de l’API de Kameleoon.