如何防止 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

也许您可以尝试使用:definedCSS 伪类来隐藏定义的自定义元素。

请参阅下面的示例：

class TestElement extends HTMLElement{
  constructor(){
    super();
    console.log("Attaching the shadow")
    this.attachShadow({mode:'open'})
  }
  connectedCallback() {
    console.log("Ok we are working")
    this.shadowRoot.innerHTML = `<style>
      ::slotted(*){background-color:red;color:white;}
      </style>
      <slot name='test'></slot>`
  }
}
upgrade.onclick = () => customElements.define("jrg-test", TestElement)

jrg-test:not(:defined) {
  display:none
}

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

<button id="upgrade">upgrade</button>