<foo-component></foo-component>
<bar-component></bar-component>
foo-component {
  --background: hotpink;
}

bar-component {
  --background: lightsalmon;
}
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)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.