Shadow Roots and Inheritance

There is a helluva gotcha with styling a <details> element, as documented here by Kitty Guiraudel. It’s obscure enough that you might never run into it, but if you do, I could see it being very confusing (it would confuse …


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

There is a helluva gotcha with styling a <details> element, as documented here by Kitty Guiraudel. It’s obscure enough that you might never run into it, but if you do, I could see it being very confusing (it would confuse me, at least).

Perhaps you’re aware of the shadow DOM? It’s talked about a lot in terms of web components and comes up when thinking in terms of <svg> and <use>. But <details> has a shadow DOM too:

<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 <summary> is inserted in the first shadow root slot, while the rest of the content (called “light DOM”, or the <p> 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 <slot> is kind of “in the way” there. That <p> is actually a child of the <slot>, 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 <p> 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 <p> 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 <slot>? Whatever the case, it doesn’t work.

Direct Link to ArticlePermalink


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


Print Share Comment Cite Upload Translate
APA
Chris Coyier | Sciencx (2024-03-29T11:58:46+00:00) » Shadow Roots and Inheritance. Retrieved from https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/.
MLA
" » Shadow Roots and Inheritance." Chris Coyier | Sciencx - Thursday September 16, 2021, https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/
HARVARD
Chris Coyier | Sciencx Thursday September 16, 2021 » Shadow Roots and Inheritance., viewed 2024-03-29T11:58:46+00:00,<https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/>
VANCOUVER
Chris Coyier | Sciencx - » Shadow Roots and Inheritance. [Internet]. [Accessed 2024-03-29T11:58:46+00:00]. Available from: https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/
CHICAGO
" » Shadow Roots and Inheritance." Chris Coyier | Sciencx - Accessed 2024-03-29T11:58:46+00:00. https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/
IEEE
" » Shadow Roots and Inheritance." Chris Coyier | Sciencx [Online]. Available: https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/. [Accessed: 2024-03-29T11:58:46+00:00]
rf:citation
» Shadow Roots and Inheritance | Chris Coyier | Sciencx | https://www.scien.cx/2021/09/16/shadow-roots-and-inheritance-2/ | 2024-03-29T11:58:46+00:00
https://github.com/addpipe/simple-recorderjs-demo