Shadow Roots and Inheritance: The <details> Gotcha
Styling a <details> element hides a tricky pitfall related to shadow DOM behavior, as documented by Kitty Giraudel. It’s an obscure edge case, but one that could easily baffle developers who encounter it unexpectedly.
Shadow DOM is commonly discussed in the context of web components, as well as <svg> and <use>. However, <details> also features its own shadow DOM structure, which affects how styles apply to its children.
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.
This means the <slot> effectively sits “in the way” of direct styling. The <p> becomes a child of the <slot> in the final tree, yet a selector like details > p still matches it correctly. That selector resolves within the light DOM and keeps working after content is slotted in.
Problems arise when using the inherit keyword. For an element styled with a property like border-radius, applying a value such as 8px works as expected—it inherits normally.
- But when you explicitly set a property to
inherit, the inheritance chain breaks. - The result is that the
<p>ends up with a square corner, ignoring the intended inherited value.
This likely happens because inheritance cannot be forced through the shadow DOM, or because the parent is actually the <slot> rather than the <details> element. Either way, the behavior doesn’t align with expectations.
