20장. `:has()`와 `@scope`

:has()로 descendant 상태를 부모에 반영할 수 있다. form이 invalid field를 가질 때 summary를 강조하거나 카드에 high priority badge가 있을 때 border를 바꾼다. 넓은 body:has(...) selector보다 component root에 제한한다.

@scope는 selector가 영향을 미치는 DOM 구간을 제한한다. 이름 충돌을 피하려 클래스 이름을 끝없이 길게 만드는 방법과 다른 선택지를 준다. 단, scope 경계와 cascade proximity가 새 디버깅 요소가 되므로 팀이 읽을 수 있을 때 채택한다.

최신 기능을 쓰는 목적은 CSS를 과시하는 것이 아니라 component 계약을 명확히 하는 것이다.