Webmasters Gallery

<details>
  #shadow-root (user-agent)
  <slot name="user-agent-custom-assign-slot" id="details-summary">
    <!-- <summary> reveal -->
  </slot>
  <slot name="user-agent-default-slot" id="details-content">
    <!-- <p> reveal -->
  </slot>

  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

As Amelia explains, the 

 is inserted in the first shadow root slot, while the rest of the content (called “light DOM”, or the 

 tag in our case) is inserted in the second slot.

The thing is, none of these slots or the shadow root are matched by the universal selector *, which only matches elements from the light DOM. 

So the is kind of “in the way” there. That

is actually a child of the , in the end. It’s extra weird, because a selector like details > p will still select it just fine. Presumably, that selector gets resolved in the light DOM and then continues to work after it gets slotted in.

But if you tell a property to inherit, things break down. If you did something like…

<div>
  <p></p>
</div>

div {
  border-radius: 8px;
}
div p {
  border-radius: inherit;
}

…that

is going to have an 8px border radius.

But if you do…

<details>
  <summary>Summary</summary>
  <p>Lorem ipsum...</p>
</details>

details {
  border-radius: 8px;
}
details p {
  border-radius: inherit;
}

That

is going to be square as a square doorknob. I guess that’s either because you can’t force inheritance through the shadow DOM, or the inherit only happens from the parent which is a ? Whatever the case, it doesn’t work.

Direct Link to Article — Permalink

The post Shadow Roots and Inheritance appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.