Making content-aware components using CSS :has(), grid, and quantity queries – Piccalilli
October 30, 2024
A big thing you need to contend with when working on design systems is anticipating all the different ways someone may use a component. The idea here is that you then preemptively provide sensible behavior and safeguards to keep things working well.
Source: Making content-aware components using CSS :has(), grid, and quantity queries – Piccalilli
One of the real strengths of web components is encapsulation–a component is by default (largely) sealed off from the DOM it is embedded in–global CSS doesn’t inherit, or cascade, into the component (caveats for CSS custom properties, slots).
Which is also a kind of weakness–since there are times you will want the global style inherited.
Here Eric Baily explores using modern CSS features that aid in creating components that are self-aware, and display themselves nicely no matter where they might be placed.
