<my-component></my-component>

:root {
  --my-color: red;
}

class MyComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'}).innerHTML = `
      <style>
        span {
          color: var(--my-color);
        }
      </style>
      <span>This should be red</span>
    `
  }
}

customElements.define('my-component', MyComponent)