Estoy trabajando en un proyecto que usa Polymer (todavía en 1.7, lo relanzaremos usando una tecnología diferente en lugar de actualizar...) y se supone que debo revisar las posibilidades para que funcione junto con DynamicYield, que es una plataforma de personalización que inyecta HTML de elementos personalizados o recomendaciones en la página de uno a través de ShadowDOM .

El problema con shadowDOM es que, por supuesto, faltan los estilos de su sitio, lo que significa que tendría que inyectar todos sus estilos y mantenerlos en DynamicYield.

Así que mi idea es tomar el contenido inyectado y sacarlo del DOM oculto. Traté de escribir algo como

 document.getElementById('rec').innerHTML = document.getElementById('rec').shadowRoot.innerHTML; document.getElementById('rec').shadowRoot.innerHTML = '';

... en la consola JS, pero, aunque el DOM se ve bien ahora, el contenido desapareció del sitio visible. (¿Tal vez sea un problema de polímero?)

¿Tiene alguna idea de lo que podría hacer para usar los estilos de los sitios principales dentro del código inyectado? Desafortunadamente, los documentos de DynamicYield no mencionan ninguna configuración para evitar que use ShadowDOM (aparte de desactivar el indicador SPA_FLOW, que no es factible en nuestro caso).

EDITAR: agregar un pequeño fragmento para mostrar el problema. Use inspeccionar para ver que el código HTML interno está en div#rec pero no está visible.

 //Simulating DynamicYield adding code. Second headline/Shadow DOM will NOT be green. const el = document.getElementById('rec'); const shadowRoot = el.attachShadow({mode: 'open'}); shadowRoot.innerHTML = '<h1>I belong to Shadow DOM</h1>'; const container = document.querySelector('body'); container.appendChild(el); //Trying to get Code out of Shadow DOM el.innerHTML = el.shadowRoot.innerHTML; el.shadowRoot.innerHTML = '';

 h1 { color: green; }

 <h1>I belong to Light DOM</h1> <div id="rec"></div>