如何防止 Slotted HTML 元素呈现，直到它位于 shadowRoot 内？答案

【问题标题】：How do I prevent a Slotted HTML element from rendering until is it inside the shadowRoot?如何防止 Slotted HTML 元素呈现，直到它位于 shadowRoot 内？
【发布时间】：2020-02-02 19:27:10
【问题描述】：

我有一个类似于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 文本？

【问题讨论】：

你试过在 div 上应用 css inline 吗？

标签： javascript html shadow-dom

【解决方案1】：

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

请看下面的例子：

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>

【讨论】：

有趣的是，所有现代浏览器都支持这个功能吗？
@Jackie 是的，我想是的（在 Chrome/Opera、Firefox、new Edge、Opera 中测试过）。我没有 Safari

【解决方案2】：

您可以通过添加到全局样式来隐藏所有未定义的自定义元素

<style>
   *:not(:defined) { display:none }
</style>

例如

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style> *:not(:defined) { display:none } </style>
    <script type="module" src="./index.js"></script>
</head>
<body>
    <test-tag>
        This content will be visible only after "test-tag" is defined
    </test-tag>
</body>
</html>

【讨论】：

全局 CSS 只会隐藏主文档中的自定义元素；这个 CSS 不会隐藏 shadowRoots 中未定义的元素