JSFiddle - React, Tailwind, and code Playground

by yoshida satoshi

HTML

<p>hoge</p>
<div class='shadow-dom'></div>

CSS

p, span {
  color: blue;
}

JavaScript

const div = document.querySelector('div');
const root = div.attachShadow({
	mode: 'open'
});
root.innerHTML = `
<style>
	:host {
  	background-color: gray;
  }
	:host(:hover) {
  	background-color: black;
  }
	p {
  	color: red;
  }
  :host span {
  	color: white;
  }
</style>
`;
const elemP = document.createElement('p');
elemP.textContent = 'Shadow DOM Sample text1';
root.appendChild(elemP);
const elemSpan = document.createElement('span');
elemSpan.textContent = 'Shadow DOM Sample text2';
root.appendChild(elemSpan);