Get Element out of Shadow DOM or use styles of main site

Question

I'm working in a project which uses Polymer (still on 1.7, we'll relaunch using a different technology instead of upgrading...) and I'm supposed to check out the possibilities to make it work together with DynamicYield, which is a personalization platform that injects HTML of personalized items or recommendations into one's page via ShadowDOM.

The problem with shadowDOM is that, of course, your site's styles are missing, meaning you'd have to inject all your styles and thus maintain them in DynamicYield.

So my idea is to take the injected content and get it out of the shadow DOM. I tried to type something like

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

... into the JS console, but, although the DOM looks good now, the content disappered from the visible site. (Maybe that's a Polymer issue?)

Do you have any ideas what I could do to use the main sites styles inside the injected code? The DynamicYield docs unfortunately don't mention any setting to prevent it from using ShadowDOM (apart from unsetting the SPA_FLOW flag which is not feasible in our case).

EDIT: Adding a small snippet to show the problem. Use inspect to see the innerHTML is 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>

Please use the [<>] button in the StackOverflow editor and make an executable code snippet which we can try and copy, tnx — Danny '365CSI' Engelman, Aug 09 '22 at 09:23
@Danny'365CSI'Engelman yep, added a simple snippet. (Which also shows the problem's got nothing to do with Polymer...) — S. Parton, Aug 09 '22 at 10:26

score 0 · Answer 1 · answered Aug 09 '22 at 10:37

Ok, I think I found a workaround. It seems nodes that still have a shadow DOM attached do not take normal innerHTML or at least can't make innerHTML visible.

Modified Snippet

//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
//WORKAROUND: Put HTML in another div that never had a shadow DOM attached.
const el2 = document.getElementById('rec2');
el2.innerHTML = el.shadowRoot.innerHTML; 
el.shadowRoot.innerHTML = '';

h1 {
          color: green;
      }

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

Yes, shadowDOM makes lightDOM invisible in the DOM. lightDOM ***can*** be made visible using ````, and then be sure to understand [what ::slotted does](https://stackoverflow.com/questions/61626493/slotted-css-selector-for-nested-children-in-shadowdom-slot/61631668#61631668) — Danny '365CSI' Engelman, Aug 09 '22 at 10:55

Get Element out of Shadow DOM or use styles of main site

1 Answers1