如何修改 #shadow-root 中特定元素的 CSS（打开）

Question

下面的例子。我将如何更改 SR 元素中 p 的显示？

#one ?SHADOW-ROOT-QUERY-SELECTOR? p { display: none};

<div>
  <p>My Website</p>

  <div id="one">
   <!--#shadow-root (open)-->
      <div id="two">
        <div id="three">
         <p>Text</p>
        </div>
      </div>
  </div>
</div>

Answer 1

您可以使用子选择器（

#three p

）或直接子选择器（

#three > p

）。对于直接子选择器，就像这样：

#three>p {
  display: none;
}

<div>
  <p>My Website</p>

  <div id="one">
    <!--#shadow-root (open)-->
    <div id="two">
      <div id="three">
        <p>Text</p>
      </div>
    </div>
  </div>
</div>

这里有更多关于 CSS 选择器的内容

Answer 2

<div>
  <p>My Website</p>

  <div id="one">
   <!--#shadow-root (open)-->
      <div id="two">
        <div id="three">
         <p style="display: none;">Text</p>
        </div>
      </div>
  </div>
</div>

或：

<div>
  <p>My Website</p>

  <div id="one">
   <!--#shadow-root (open)-->
      <div id="two">
        <div id="three">
         <p>Text</p>
        </div>
      </div>
  </div>
</div>
<script>
  let threeEl = document.getElementById("three");
  let threePEl = threeEl.querySelector("p");
  threePEl.style.display = "none";
</script>

或者 CascadiaJS 的答案。