Javascript 将阴影DOM添加到自定义元素时。。。已经声明的非阴影内容（Light DOM）在哪里消失？

TLDR:只要我使用阴影DOM定义一个自定义元素，同一元素中声明的灯光DOM就会从浏览器视口中消失

为什么自定义元素中的灯光DOM不再显示

---

我正在学习/试验

自定义元素

和

阴影DOM

我注意到，如果我有以下

自定义元素

，而没有任何

阴影DOM

，它就可以工作：

---

©；2020年，

就我的实验和进一步阅读所知，这就是正在发生的事情：

通过调用

类

定义中的

attachShadow（）

，我们明确确定当元素为

define（）

-d时，它将成为

影子主机

：

constructor() {
  super();
  this.root = this.attachShadow({mode: "open"});
}

一旦元素正式成为

阴影主体

其灯光DOM将不再显示在视口中：

• 阴影主机

  将不会显示HTML中已声明的Light DOM

• 阴影主机

  不会显示稍后通过Javascript添加的Light DOM

---

进一步确认：

默认情况下，如果元素具有阴影DOM，将渲染阴影树 而不是元素的子元素

来源：

---

结论：

带回元素的Light DOM子元素的标准（也是唯一的？）方法是使用命名的

-s，在本例中：

class myCompany\u元素扩展了HtmleElement{
构造函数（）{
超级（）；
this.root=this.attachShadow（{mode:“open”}）；
}
connectedCallback（）{
this.root.innerHTML+=''；
this.root.innerHTML+=“Cyberdyne系统”；
}
}
customElements.define（'my-company'，myCompany\u元素）
©；2020年，
这是一个针对您的用例的简单解决方案，它不需要
插槽
s：


class myCompany\u元素扩展了HtmleElement{
构造函数（）{
超级（）
this.root=this.attachShadow（{mode:'open'}）
}
connectedCallback（）{
//在下面添加了一行
this.root.textContent+=this.textContent
this.root.textContent+=“Cyberdyne系统”
}
}
customElements.define（'my-company'，myCompany\u元素）
©；2020年，
Ah。明亮的我非常喜欢这个。出色的工作。谢谢。基于您的解决方案，我注意到，在进一步阅读后，我可以在自定义元素中使用自定义属性：
©；2020年，
和
this.root.textContent=this.textContent+this.getAttribute（'corporation'）
。我还没有测试过，但我想您可以稍后添加lightDOM内容，然后它就可以用于shadowDOM插槽。因为我知道在lightDOM中动态更改slotnames将在s中显示它。见长：开槽柱底部：