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...

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...

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

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.