<custom-component></custom-component>
class CustomComponent extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' }).innerHTML = `
<style>
:host::part(foo) {
color: blue;
}
</style>
<span part="foo">I should be blue</span>
`
}
}
customElements.define('custom-component', CustomComponent)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.