如何防止Slotted HTML元素呈现到shadowRoot内部？

Question

我有一个非常简单的网站，类似于此jsfiddle。一切似乎都可以正常工作，但是在我的本地机器上工作正常，但是当我在第一行JS行（声明自定义元素之前）停下来时，我可以看到没有格式的div ...

<jrg-test>
  <div slot="test">
      This should work
  </div>
</jrg-test>

connectedCallback() {
  console.log("Ok we are working")
  this.shadowRoot.innerHTML = "<slot name='test'></slot>"
  const element = document.createElement('style');
  element.textContent = "::slotted(*){background-color:red;color:white;}";
  this.shadowRoot.appendChild(element);
}

所以基本上，如果我在呈现自定义元素之前停下来，我会看到原始div。我知道有一些涉及定位和CSS的hacky解决方案，但是有没有更干净的解决方案。我可能可以用JS专门实现吗？

所以主要问题是如何在应用红色背景和白色之前如何隐藏This should work文本？

Answer 1

也许您可以尝试使用:defined CSS伪类在定义自定义元素时将其隐藏。

请参见下面的示例：