<div>
  Default:
  <custom-component></custom-component>
</div>

<div>
  Dark:
  <custom-component class="dark"></custom-component>    
</div>

<div>
  Light:
  <custom-component class="light"></custom-component>
</div>

class CustomComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        :host, :host(.light) {
          background: white;
          color: black;
        }
        :host(.dark) {
          background: black;
          color: white;
        }
        @media (prefers-color-scheme: dark) {
          /* some unfortunate repetition here */
          :host {
            background: black;
            color: white;
          }
        }
      </style>
      <span>Hello world!</span>
    `
  }
}

customElements.define('custom-component', CustomComponent)