This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel
I encountered a bit of a HTML/CSS oddity the other day, and was a little stumped as to what was happening so I thought I’d share what I learnt in case that helps other people stumbling across the same thing.
The problem
Take a basic <details>
and <summary>
combo:
<details>
<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>
Now, consider the following inocuous CSS:
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
While there is nothing too ground-breaking here, what’s interesting to note is that anything within the <details>
element will have a content-box
box sizing, and not a border-box
one.
Feel free to judge by yourself in this demo.
This is not specific to box-sizing
though. There is nothing special about this property that would cause this behaviour. In face, all enforced inheritance break down at the <details>
layer, as Šime Vidas pointed out on Twitter.
The reason
Amelia Bellamy-Royds was so kind as to explain why that is:
Because of the weird display model of
<details>
, it is implemented as a shadow DOM (with the summary slotted in first, and then the rest of the light DOM contents). Inherited properties will inherit through the composed tree including shadow elements, which you can’t style.CSS inheritance should follow [<details> → shadow root → <slot> → <summary>]. But
box-sizing
isn't normally inherited, and the* { box-sizing: inherit }
rule in the document won’t match either the shadow root node or the slot element.
Amelia then recommended enabling the “Show user agent shadow DOM” Chromium DevTools setting, which enhance the DOM representation with browser shadow DOM. Inspecting our demo, we can see something like this now:
<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. Therefore, <summary>
properly inherits box-sizing
from its parent, but its inner shadow root does not, and neither do the inner slots, hence why the <summary>
and the <p>
elements don’t.
The workaround
I played with some ideas to apply the box-sizing
rule to shadow roots as well, but I didn’t find anything too conclusive.
What’s particularly interesting is that things work as you’d expect on Firefox though. So either Firefox does not implement <details>
with Shadow DOM (which it doesn’t have to, as the implementation is not specified), or it does but it makes inheritance work as expected. There is an open whatwg/html issue about this.
I guess a simple fix is to apply box-sizing: border-box
to details > *
as well, or to apply box-sizing: border-box
to everything and bypass inheritance entirely.
This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel
Kitty Giraudel | Sciencx (2021-08-23T00:00:00+00:00) Shadow Roots and Inheritance. Retrieved from https://www.scien.cx/2021/08/23/shadow-roots-and-inheritance/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.