JSFiddle - React, Tailwind, and code Playground

by Comandeer

HTML

<div>
	<shadow-root>
		<p>Testowa treść</p>
	</shadow-root>
</div>

<div>
	<shadow-root>
		<p>Inna testowa treść</p>
	</shadow-root>
</div>

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


<button>Dodaj element</button>

JavaScript

( function() {
	class ShadowRoot extends HTMLElement {
		connectedCallback() {
			this._upcast();
		}

		_upcast() {
			const parent = this.parentNode;
			const shadow = parent.attachShadow( { mode: 'open' } );

			shadow.appendChild( this._createDocumentFragment( this ) );

			this.remove()
		}

		_createDocumentFragment() {
			const documentFragment = new DocumentFragment();
			const children = Array.from( this.children );

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

			return documentFragment;
		}
	}

	window.customElements.define( 'shadow-root', ShadowRoot );

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

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

		div.innerHTML = `<shadow-root>
			<p>Testowy element</p>
		</shadow-root>`;

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