이 문서는 CSS Selectors Level 4 에서 정의된 `:scope` 가상 클래스의 역할과 `querySelector` 계열 메서드와의 상호작용을 설명합니다. `:scope` 는 선택자가 적용되는 문맥적 참조 요소 집합 (contextual reference element set) 을 나타냅니다. 주요 용도는 두 가지입니다: 1) `<style scoped>` 내에서 현재 스타일 블록이 적용된 요소를 선택하여 하위…
8 min read
CSS :scope 가상 클래스의 용도 및 동작 방식
Source
Evernote/Advanced View Required/What's the CSS scope pseudo-class for.md
Summary
이 문서는 CSS Selectors Level 4 에서 정의된 :scope 가상 클래스의 역할과 querySelector 계열 메서드와의 상호작용을 설명합니다. :scope 는 선택자가 적용되는 문맥적 참조 요소 집합 (contextual reference element set) 을 나타냅니다. 주요 용도는 두 가지입니다: 1) <style scoped> 내에서 현재 스타일 블록이 적용된 요소를 선택하여 하위 트리에만 스타일을 제한하는 것, 2) querySelectorAll 에서 선택자를 특정 컨텍스트 요소의 하위 트리로만 제한하여 예상치 못한 매칭 (예: 조상 요소나 형제 요소까지 포함되는 현상) 을 방지하고 jQuery 의 .find() 와 유사한 직관적인 동작을 보장하는 것. 당시 (2013 년 기준) WebKit/Chrome 에서 성능상 이점은 없었으나, 선택자 매칭의 정확성과 예측 가능성을 높이는 데 목적이 있습니다.
Key Points
정의: :scope 는 선택자가 평가되는 문맥적 참조 요소 집합을 나타내는 가상 클래스입니다.
스타일 스코핑: <style scoped> 사용 시, :scope 는 해당 스타일 블록이 붙은 부모 요소를 선택합니다.
querySelector 의 문제점: 일반 element.querySelectorAll('selector') 은 선택자가 문서 전체 문맥에서 평가되어, 컨텍스트 요소의 조상이나 형제까지 매칭될 수 있는 의도치 않은 동작이 발생합니다.
:scope 로 해결: element.querySelectorAll(':scope selector') 로 사용하면 선택자가 해당 요소의 하위 트리로만 제한되어 매칭됩니다.
성능: 문서 작성 당시 (2013 년) 는 성능 이점이 없었으나, 선택자 매칭 영역을 줄임으로써 이론적으로 향후 성능 향상이 기대되었습니다.