<div id="shadow-dom">
  <button>Shadow DOM</button>
</div>
  
<div id="light-dom">
  <button>Light DOM</button>  
</div>

button {
  display: inline-block;
  background: #3498db;
  border: 2px solid #2980b9;
  padding: 10px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: Arial;
  color: white;
  cursor: pointer;
  margin: 2px 8px;
  width: 150px;
}

const element = document.getElementById('shadow-dom');
const shadowRoot = element.attachShadow({ mode: 'open' });

shadowRoot.innerHTML = `<style>
button {
  display: inline-block;
  background: #e67e22;
  border: 2px solid #d35400;
  padding: 10px 12px;
  border-radius: 4px;
  text-transform: uppercase;
  font-family: Arial;
  color: white;
  cursor: pointer;
  margin: 2px 8px;
  width: 150px;
}
</style>
<button>Shadow Root</button>`;