Javascript 不渲染阴影的自定义元素

我试图创建一个带有阴影的自定义元素，但是当我添加阴影时，元素的内容不会渲染。这是我的密码：

JavaScript:

class CustomElement extends HTMLElement {
 constructor (){
  super();
  var shadow = this.attachShadow({mode: 'open'});
  var content = document.createElement("DIV");
  content.innerText = "hello world";
  shadow.appendChild(content);
 }
}
customElements.define("custom-element", CustomElement);

HTML:

废话废话

---

但它所呈现的只是文本“hello world”

这是阴影DOM的正常行为：阴影DOM内容屏蔽了原始内容（称为Light DOM）

如果要显示灯光DOM内容，请在阴影DOM中使用

class CustomElement扩展了HtmleElement{
构造函数（）{
超级（）；
var shadow=this.attachShadow（{mode:'open'}）；
var content=document.createElement（“DIV”）；
content.innerHTML=“你好，世界：
”；
shadow.appendChild（内容）；
}
}
自定义元素。定义（“自定义元素”，CustomElement）
废话废话废话
在codepen上它可以工作，但我已经删除了我的答案。