Question 44597 in Html Question posted in
Some basic documentation can be found here.

How do I modify the CSS from a specific element in #shadow-root (open) – Html

Example below. How would I change the display of the p in the SR element? #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>
Tags:

2

Answers


  1. 0

    You can use the child selector (#three p) or the immediate child selector (#three > p). Like this for the immediate child selector:

    #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>

    Here’s more on CSS selectors

    Login or Signup to reply.
  2. 0 
    <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>

    Or:

    <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>

    Or CascadiaJS’s answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search