Post

We're giving away a free ticket to the CSS Layout Workshop. To be entered in the drawing, comment below with… - A question you have about CSS layout - Or a fun demo, trick, or snippet of CSS The winner will be announced on Friday, April 18! #css www.oddbird.net/workshops/ca...

oddbird.netCascading LayoutsA workshop on resilient CSS layouts

Anthony Frehner

@frehner.me

15 Apr 2025

A question I had yesterday was: What is the “flat tree”? I also wrote a blog post on how you could use Container Style Queries to expose internal states frehner.me/blog/contain...

frehner.meContainer Style Queries for Sharing Internal StateAn explanation of how you could use Container Style Queries to expose internal state (for example, in a Custom Element) to children elements in CSS.

Mia [data-css=poetic]

@miriam.codes

The DOM is a tree of nested elements. But shadow-DOM creates alternate universe trees. Consider details/summary: - in the light tree, details element contains a summary & anything else we put in there - in the shadow tree, it contains a summary & a (hidden to us) content block with a slot inside

16/4/25, 6:43 pm0 reposts1 like

Mia [data-css=poetic]

@miriam.codes

16 Apr 2025

Our selectors work on one tree or the other. Light styles `details > p` will select a p we put into details. But `:host > p` from the shadow styles won't. The "flat tree" is light+shadow smushed back together. Props inherit from details into the shadow content block back out to our slotted p.

Mia [data-css=poetic]

@miriam.codes

16 Apr 2025

With a caveat that I didn't check my assumption of how details/summary elements are actually structured in browsers, and the actual shadow structure might be different between browsers – but it seemed like a simple example we could all imagine working that way. :)