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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.