native-web-component - HTML でシャドウ DOM に子を追加するにはどうすればよいですか?

Question

たとえば、これを HTML で記述できるようにしたい:

<my-container>
  Some text.
</my-container>

JS:

class MyContainer extends HTMLElement {
  constructor() {
    super()
    const shadow = this.attachShadow({mode: 'open'})
    const p = document.createElement('p')
    shadow.appendChild(p)
  }
}

customElements.define('my-container', MyContainer)

私が最終的に得たもの（予想外ではありませんが）：

<my-container>
  <p></p>
  Some text.
</my-container>

私が欲しいもの：

<my-container>
  <p>Some text.</p>
</my-container>