<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)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.