I am currently involved in a project that utilizes Polymer (still on version 1.7, but we are planning to switch to a different technology instead of upgrading). My task involves exploring ways to integrate DynamicYield, a personalization platform that inserts HTML of personalized items or recommendations into a webpage via ShadowDOM.
One drawback of using shadowDOM is that the site's styles are not included, necessitating the need to inject and maintain all styles within DynamicYield.
My proposal is to extract the injected content from the shadow DOM. I attempted to do this by typing the following code snippet into the JS console:
document.getElementById('rec').innerHTML = document.getElementById('rec').shadowRoot.innerHTML;
document.getElementById('rec').shadowRoot.innerHTML = '';
However, despite the DOM appearing correct, the content disappeared from the visible site (potentially due to a Polymer issue).
Does anyone have any suggestions on how to incorporate the main site's styles into the injected code? Unfortunately, the DynamicYield documentation does not mention any settings to disable ShadowDOM (aside from unsetting the SPA_FLOW flag which is not viable for us).
EDIT: Here is a small snippet demonstrating the issue. Use inspect to see that the innerHTML is present in div#rec but not 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>