<!-- elements outside shadow dom -->
<div class="container">
  <h1 id="shadow-dom-host"></h1>
</div>

/* Following CSS is being applied inside the shadow DOM. */

:host-context(.container) {
  border: 5px dashed green;
}

:host-context(h1) {
  color: red;
}

const shadowDom = init();

// add a  element in the shadow DOM
const span = document.createElement('span');
span.textContent = 'Inside shadow DOM';
shadowDom.appendChild(span);

// attach shadow DOM to the #shadow-dom-host element
function init() {
  const host = document.getElementById('shadow-dom-host');
  const shadowDom = host.attachShadow({ mode: 'open' });

  const cssTab = document.querySelector('#css-output');
  const shadowStyle = document.createElement('style');
  shadowStyle.textContent = cssTab.textContent;
  shadowDom.appendChild(shadowStyle);

  cssTab.addEventListener('change', () => {
    shadowStyle.textContent = cssTab.textContent;
  });
  return shadowDom;
}