<foo-component></foo-component>
<bar-component></bar-component>

:root {
  --background: black; /* does nothing */
}

class FooComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        :host {
          --background: lightgreen;
        }
        span {
          background: var(--background);
        }
      </style>
      <span>Hello, foo component!</span>
    `
  }
}

class BarComponent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({ mode: 'open' }).innerHTML = `
      <style>
        :host {
          --background: lightblue;
        }
        span {
          background: var(--background);
        }
      </style>
      <span>Hello, bar component!</span>
    `
  }
}

customElements.define('foo-component', FooComponent)
customElements.define('bar-component', BarComponent)