customElement.js

const createH2 = () => {
  const h2Element = document.createElement('h2');
  h2Element.textContent = 'This is a Styled Custom Element';
  return h2Element;
};

class OPENSHADOW extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.appendChild(createH2());
  }
}
customElements.define('open-shadow', OPENSHADOW);

// add in the <open-shadow /> element in the html and connect this js file to do the thing