Saltar al contenido principal
Shadow DOM es una funcionalidad avanzada de desarrollo web que permite a los desarrolladores encapsular una parte de la estructura de su página web, creando una sección «shadow» separada. Piense en ello como crear una miniatura de página web dentro de un componente de su sitio principal. Esta «mini-página» funciona de forma independiente del resto de su página, lo que evita conflictos entre los estilos y scripts utilizados dentro del componente y los del resto de la página. Si trabaja en el editor gráfico de Kameleoon, deberá conocer cómo funciona el DOM (Document Object Model) para utilizar elementos del Shadow DOM. Dado que los elementos del Shadow DOM no son visibles en el DOM principal de forma predeterminada, tareas como colocar widgets o personalizar experimentos pueden ser más complicadas que trabajar con elementos estándar del DOM.
Esta funcionalidad está dirigida a personas con experiencia en desarrollo. Si no se siente cómodo trabajando con el DOM o con la encapsulación de Shadow DOM, es buena idea acudir a un desarrollador o consultar recursos en línea sobre Web Components y los fundamentos del Shadow DOM.

​
Limitación de los selectores estándar

Los selectores CSS estándar o los métodos JavaScript como querySelector() o $() no funcionan en elementos que se encuentran dentro de un Shadow DOM. Estos elementos están ocultos de la página principal, lo que significa:
  • No puede orientar elementos dentro de un Shadow DOM utilizando los métodos de selección habituales en el editor gráfico de Kameleoon.
  • Orientar estos elementos mediante selectores CSS o de estilo jQuery tradicionales en su experimento puede fallar.
  • Cualquier modificación (como cambios de texto, actualizaciones de estilo o inserción de contenido) puede no aplicarse a menos que se tomen pasos especiales para cruzar el límite del Shadow DOM.
Si no está seguro de si está tratando con un Shadow DOM, inspeccione el elemento utilizando las herramientas de desarrollador de su navegador. Busque #shadow-root en el panel Elements.

​
Trabajar con Shadow DOM en el editor gráfico

En la mayoría de los casos, los usuarios pueden seleccionar elementos dentro de un shadow root directamente desde la zona de previsualización del editor gráfico de Kameleoon.

​
Cuando aparece el campo adicional «Shadow root path»

En algunos casos, cuando intenta seleccionar o editar un elemento dentro de un Shadow DOM mediante el editor gráfico de Kameleoon, es posible que vea un campo de entrada adicional denominado Shadow root path. Este campo aparece cuando Kameleoon detecta que el elemento objetivo existe dentro de un árbol shadow y no se puede acceder a él utilizando selectores estándar. El Shadow root path le permite definir una ruta específica a través de capas anidadas del Shadow DOM para que Kameleoon pueda alcanzar y modificar el elemento durante la ejecución del experimento. Conexión simulada: el editor gráfico utiliza esta ruta para «simular» la conexión entre el DOM principal y el elemento dentro del Shadow DOM, lo que le permite editar y previsualizar los cambios visualmente como si el elemento formara parte de la estructura normal de la página.

​
Ejemplos

​
Orientar un botón dentro de un shadow root

En el editor gráfico de Kameleoon puede orientar elementos dentro de un shadow root:
  • Directamente en la zona de previsualización: si se puede acceder al elemento, puede seleccionarlo dentro de la previsualización del editor, igual que cualquier elemento estándar.
  • Usando «Edit selector»: para estructuras más complejas, puede construir manualmente la ruta del selector utilizando la entrada Edit selector. Utilice el separador ::SHADOW-ROOT:: para indicar un paso dentro de un shadow root.

​
Inspeccionar Shadow DOM en DevTools

  1. Haga clic con el botón derecho en el elemento > Inspect.
  2. En el panel Elements, busque #shadow-root (open) debajo del elemento personalizado.
  3. Expándalo para ver los elementos internos.
Por ejemplo: 
<my-element>
  #shadow-root (open)
    <button class="cta">Click me</button>
</my-element>

​
Indicadores visuales o etiquetas en la UI

Al trabajar con páginas web que utilizan Shadow DOM, el editor gráfico de Kameleoon proporciona varios indicadores visuales para ayudarle a identificar cuándo los elementos forman parte de un shadow root.

​
#shadow-root en el panel Elements

En el panel Elements del editor, los componentes que utilizan Shadow DOM mostrarán #shadow-root como parte de su selector CSS, lo que indica que el elemento está encapsulado y no forma parte del árbol DOM principal.

​
Campo «Shadow root path» en el panel del selector

Al seleccionar un elemento dentro de un shadow root, aparece una entrada adicional Shadow root path en el panel Edit CSS selector. Esta entrada le permite construir una ruta completa a través de los shadow roots utilizando la sintaxis ::SHADOW-ROOT::.

​
Cómo escribir una ruta de selector para elementos del Shadow DOM

Al trabajar con elementos del Shadow DOM en el editor gráfico de Kameleoon, un selector CSS estándar no es suficiente. Debe definir una ruta de selector que incluya el shadow root. Para orientar un elemento dentro de un shadow root de un solo nivel, utilice el separador ::SHADOW-ROOT::: custom-element::SHADOW-ROOT::.target-button El separador ::SHADOW-ROOT:: indica a Kameleoon que debe entrar en el shadow root del elemento especificado y continuar orientando dentro de él utilizando selectores CSS estándar.
Kameleoon actualmente solo admite navegar un nivel dentro del shadow DOM. Si el elemento está anidado dentro de varios shadow roots, no se puede orientar utilizando una ruta de selector completa por el momento.

​
Ejemplo

<my-element>
  #shadow-root
    <button class="cta">Click me</button>
</my-element>
Su ruta de selector será my-element::SHADOW-ROOT::.cta Esto indica a Kameleoon que debe:
  • Seleccionar el elemento my-element.
  • Entrar en su shadow root.
  • Orientar el botón .cta dentro de él.

​
Limitaciones y consideraciones

Al trabajar con Shadow DOM, tenga en cuenta las siguientes limitaciones:
  • Shadow DOM cerrados: no se puede acceder ni modificar los elementos de un shadow root cerrado utilizando el editor gráfico o JavaScript estándar.
  • Contenido dinámico o generado por script: si el contenido dentro de un shadow root se genera o actualiza dinámicamente, sus cambios pueden no persistir o no surtir efecto como se espera.
  • Restricciones de estilo: los estilos aplicados desde fuera del shadow root a menudo no afectarán a los elementos internos debido a la encapsulación de estilos del Shadow DOM. Es posible que las reglas CSS deban aplicarse directamente dentro de la estructura interna del componente, lo que no es posible a través del editor gráfico.

​
Shadow root (closed)

Algunos web components utilizan un shadow root cerrado, lo que significa que su DOM interno está completamente oculto de las herramientas de desarrollador del navegador y de JavaScript. A diferencia de un shadow root abierto, al que puede acceder utilizando .shadowRoot, un shadow root cerrado no expone su contenido a través del DOM, lo que lo hace inaccesible para:
  • El editor gráfico
  • El targeting basado en JavaScript
  • Las rutas de selector o los scripts personalizados
Dado que los elementos internos de un shadow root cerrado están ocultos, no puede seleccionarlos ni modificarlos en Kameleoon. Aunque vea el componente envoltorio externo, su estructura interna permanece sellada.

​
¿Qué puede hacer?

Si un elemento clave se encuentra dentro de un shadow root cerrado, necesitará la ayuda de un desarrollador. Esta persona puede:
  • Reconstruir el componente utilizando un shadow root abierto.
  • Exponer elementos concretos para su targeting externo.
  • Proporcionar un hook o una solución alternativa para el targeting.
Si no puede inspeccionar el interior de un componente en DevTools del navegador, es probable que utilice un shadow root cerrado.

​
Shadow roots anidados

Los Shadow DOM pueden estar anidados en varias capas (por ejemplo, un shadow root dentro de otro shadow root). Este caso no es compatible con la versión actual de Kameleoon.
Si un elemento no responde a las ediciones, compruebe si está dentro de un shadow root cerrado o si le falta alguna parte de la ruta.

​
Añadir widgets al shadow root

Los widgets no se pueden añadir dentro de elementos del Shadow DOM en el editor gráfico de Kameleoon porque el Shadow root aísla su contenido de los nodos DOM a los que puede llegar el editor.

​
Añadir seguimiento de clics desde el editor gráfico

Actualmente no puede añadir un goal de seguimiento de clics directamente desde el editor gráfico para elementos del Shadow DOM. Sin embargo, puede crear y gestionar uno utilizando la API de Kameleoon.