Shadow Roots and Inheritance
Publikováno: 16.9.2021
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 Article — Permalink
The post Shadow Roots and Inheritance appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.