是否不允许自定义元素操纵其自己的子节点？

Question

这当然有效：

class MyElement extends HTMLElement {
  constructor() {
  	super()
    
    this.attachShadow({mode: 'open'}).
      appendChild(document.createTextNode('asdf'))
  }
}
customElements.define('my-element', MyElement)

document.body.appendChild(
  document.createElement('my-element'))

但是在这里定义阴影DOM是否必要？让我们看看没有它会发生什么：

class MyElement extends HTMLElement {
  constructor() {
    super()

    this.appendChild(document.createTextNode('asdf'))
  }
}
customElements.define('my-element', MyElement)

document.body.appendChild(
  document.createElement('my-element'))

突然抛出。不，不是抛出的构造函数，而是document.createElement。

奇怪的是，放弃document.createElement而是直接使用构造函数看起来很不错：

class MyElement extends HTMLElement {
  constructor() {
    super()

    this.appendChild(document.createTextNode('asdf'))
  }
}
customElements.define('my-element', MyElement)

document.body.appendChild(new MyElement())

我在这里很困惑。自定义元素是否被禁止操纵自己的子节点？不仅是子节点，在自定义元素内执行像this.style.color = 'red'这样简单的操作也会产生相同的结果。但是，如果禁止他们这样做，为什么调用构造函数直接按预期工作？这是怎么回事？

我必须使用影子DOM还是可以放弃它？