<my-ce></my-ce>

<script>
  class MyCe extends HTMLElement {
    constructor() {
      super()
      const shadow = this.attachShadow({ mode: 'open' })
      shadow.innerHTML = `<p>Hello, Shadow DOM!</p>`
      shadow.innerHTML += '<style>p { color: red; }</style>'
    }
  }
  customElements.define('my-ce', MyCe)
</script>

Add a style

You can add a style tag to the shadow DOM to style the content of the custom element.