JSFiddle - React, Tailwind, and code Playground

by Comandeer

HTML

<div>
	<shadowroot>
		<p>Testowa treść</p>
	</shadowroot>
</div>

<div>
	<shadowroot>
		<p>Inna testowa treść</p>
	</shadowroot>
</div>

<div>
	<shadowroot>
		<img src="https://www.comandeer.pl/images/custom/comandeer.jpg" alt="Comandeer" onload="console.log( 'załadowano' );">
	</shadowroot>
</div>


<button>Dodaj element</button>

JavaScript

( function() {
  function createDocumentFragment( element ) {
    const documentFragment = new DocumentFragment(); // 2
    const children = Array.from( element.children ); // 3

    children.forEach( ( child ) => {
      documentFragment.appendChild( child ); // 4
    } );

    return documentFragment; // 5
  }

  function upcastShadows() {
    const shadowRoots = document.querySelectorAll( 'shadowroot' );

    shadowRoots.forEach( ( shadowRoot ) => {
      const parent = shadowRoot.parentNode;
      const shadow = parent.attachShadow( { mode: 'open' } );

      shadow.appendChild( createDocumentFragment( shadowRoot ) ); // 1

      shadowRoot.remove()
    } );
  }

  upcastShadows(); // 2

  const observer = new MutationObserver( function() {
    upcastShadows(); // 6
  } );

  observer.observe( document.body, { // 3
    childList: true, // 4
    subtree: true // 5
  } );

  const button = document.querySelector( 'button' );

  button.addEventListener( 'click', () => {
    const div = document.createElement( 'div' );

    div.innerHTML = `<shadowroot>
<p>Testowy element</p>
</shadowroot>`;

    button.parentNode.insertBefore( div, button );
  } );
}() );