<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)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.