CSS 범위 지정 모듈 1단계

요약

이 명세서는 CSS를 위한 다양한 범위 지정/캡슐화 메커니즘을 정의합니다. 여기에는 범위 지정 스타일과 @scope 규칙, 섀도 DOM 셀렉터, 페이지/영역 기반 스타일링이 포함됩니다. CSS는 구조화된 문서(예: HTML, XML)의 화면, 인쇄, 음성 등에서의 렌더링을 설명하는 언어입니다.

이 문서의 상태

목차

1 소개

...

2 범위 지정 스타일

Scoped 스타일 규칙은 문서의 전체가 아니라 특정 하위 트리 내에서만 적용됩니다. 범위 지정에는 두 가지 주요 효과가 있습니다:

• scoped 스타일 규칙의 셀렉터는 범위 내의 요소에만 일치하도록 제한됩니다. 자세한 내용은 Scoped Selectors를 [SELECTORS4]에서 확인하세요.
• 특이도와 무관하게 범위 지정된 규칙이 범위 지정되지 않은 규칙보다 우선합니다. 자세한 내용은 Cascading by Scope를 [CSS3CASCADE]에서 확인하세요.

2.1 범위 지정 메커니즘

스타일 규칙은 문서 언어에서 정의된 구조를 사용하거나 CSS의 @scope 규칙을 사용하여 범위 지정할 수 있습니다.

2.1.1 범위 지정을 위한 문서 마크업

문서 언어는 스타일시트를 문서 내의 특정 요소에 범위 지정하는 메커니즘을 정의할 수 있습니다. 예를 들어, HTML에서 style 요소에 scoped 속성이 있으면 해당 스타일시트는 style 요소의 부모 요소에 범위가 지정됩니다. [HTML]

2.1.2 CSS 범위 지정 문법: @scope 규칙

@scope at-rule은 작성자가 CSS 문법을 사용하여 범위 지정 스타일 규칙을 만들 수 있게 해줍니다. @scope 규칙의 문법은 다음과 같습니다:

@scope <selector> {
  <stylesheet>
}

여기서 <selector>와 일치하는 요소들은 범위 루트가 되며, <stylesheet> 내의 스타일 규칙에 적용됩니다. @scope로 범위 지정된 스타일 규칙의 셀렉터는 해당 범위 루트에 범위 포함됩니다.

이 규칙은 작성자가 범위 지정 스타일시트를 매우 쉽게 만들 수 있게 하며, 이는 범위 지정 스타일 구현 시 최적화 전략에 영향을 미칠 수 있습니다.

여러 요소가 <selector>와 일치하는 경우, <stylesheet>가 각각 독립적으로 복제되어 범위 지정됩니다. 작성자는 너무 일반적인 셀렉터 사용을 피해야 하며, 이는 계단식과 혼동을 일으킬 수 있습니다.

@scope div {
  span {
    color: blue;
  }
}
@scope section {
  span {
    color: orange;
  }
}

<div>
  <section>
    <div>
      <span>text</span>
    </div>
  </section>
</div>

@scope 규칙은 중첩될 수 있습니다. 이 경우, 중첩된 스타일 규칙과 마찬가지로, 외부 @scope의 셀렉터가 내부 셀렉터를 범위로 포함합니다.

@scope 규칙 내부의 셀렉터 특이성은 로컬로 계산됩니다: 범위 요소를 지정하는 셀렉터는 무시됩니다. 하지만 범위 지정 스타일이 비범위 스타일보다 우선하기 때문에, @scope 내부의 스타일 규칙이 외부 규칙을 덮어씁니다.

  @scope aside {
    p { color: green; }
  }
  aside#sidebar p { color: red; }

여러 @scope 규칙이 요소에 적용될 때, 이들을 특이성에 따라 계단식할 것인가?

2.2 범위 지정 컨텍스트 쿼리

2.2.1 범위 루트 선택: :scope 의사 클래스

범위 지정 스타일시트에서, :scope 의사 클래스는 [SELECTORS4]에서 정의되었으며, 범위 루트와 일치합니다.

2.2.2 범위 외부 선택: :scope-context() 의사 클래스

:scope-context(<selector>) div {...}
scope(<selector>) div {...}
\scope <selector>\ div {...}
<selector> \scope\ div {...}

3 섀도 캡슐화

Shadow DOM 명세는 DOM에 여러 새로운 개념을 추가하며, 이 중 몇 가지는 CSS와 관련이 있습니다.

섀도 트리는 DOM 내의 어떤 요소에도 첨부할 수 있는 문서 조각입니다. 섀도 트리의 루트는 섀도 루트이며, 이는 섀도 호스트와 연결된 비-요소 노드입니다. 하나의 요소는 여러 섀도 트리를 가질 수 있으며, 이들은 생성 순서대로 정렬됩니다. 요소에 대해 가장 최근에 생성된 섀도 트리가 그 요소의 활성 섀도 트리입니다.

섀도 트리가 있는 요소는 섀도 호스트입니다. 이는 자신의 섀도 트리에 대한 호스트 요소가 됩니다.

섀도 호스트의 자손들은 포매팅 트리에서 박스를 생성하지 않아야 합니다. 대신, 활성 섀도 트리의 내용이 해당 요소의 내용처럼 박스를 생성합니다.

섀도 DOM의 여러 상황에서, 요소는 요소 부모를 가지지 않을 수 있습니다 (대신 섀도 루트나 다른 것이 부모일 수 있음). 부모가 없거나, 부모가 요소가 아닌 경우, 이를 최상위 요소라고 부릅니다.

섀도 호스트의 자식들은 일반적으로 박스를 생성하지 않지만, 이들을 섀도 트리로 명시적으로 끌어와서 정상적으로 렌더링되도록 할 수 있습니다. 이는 요소를 분배 리스트에 할당함으로써 수행됩니다. 분배 리스트가 있는 요소를 삽입 지점이라고 합니다.

본 명세서는 분배 리스트에 요소를 할당하는 방법을 정의하지 않으며, 이는 Shadow DOM 명세에 맡깁니다. 이 명세가 작성된 시점에서는, content 요소만이 섀도 트리 내에서 분배 리스트를 가질 수 있습니다.

삽입 지점 자체는 어떠한 박스도 생성하지 않아야 합니다. 대신, 그 분배 리스트의 요소들이 마치 삽입 지점을 제자리에 대체한 것처럼 정상적으로 박스를 생성합니다. (이는 display-box: contents 동작과 유사합니다.)

3.1 섀도 DOM 선택 모델

요소 트리 내의 요소는 추가적으로 0개 이상의 섀도 트리와 0개 또는 1개의 분배 리스트를 가질 수 있습니다.

참고: 요소의 "자손"은 해당 요소의 자식만을 기준으로 하며, 섀도 트리나 분배 리스트는 포함하지 않습니다.

셀렉터가 섀도 트리에 대해 매칭될 때, 초기 셀렉터 매치 리스트는 섀도 호스트와 그 섀도 트리의 모든 최상위 요소 및 그들의 자손들로 구성되고, 사전순(pre-order) 순서로 정렬됩니다.

3.1.1 섀도 트리 내 호스트 요소

섀도 호스트는 자신이 호스팅하는 섀도 트리 외부에 있지만, 때때로 섀도 트리 컨텍스트 내부에서 스타일을 적용할 필요가 있습니다.

셀렉터의 관점에서, 호스트 요소는 각 섀도 트리마다 나타나며, 그 섀도 트리의 내용이 자식으로 처리됩니다. 요소가 여러 개의 섀도 트리를 가진다면, 각각의 섀도 트리 컨텍스트에 독립적으로 나타납니다; 각 섀도 트리는 자신만을 해당 호스트 요소의 내용으로 봅니다. 다른 섀도 트리는 해당되지 않습니다.

호스트 요소는 어떠한 방법으로도 선택할 수 없으며, 오직 :host와 :host-context() 의사 클래스만 해당됩니다. 즉, 이 컨텍스트에서 섀도 호스트는 태그 이름, ID, 클래스, 속성을 가지지 않으며, 오직 :host 의사 클래스가 일치한다는 정보만 가집니다. 특히, 호스트 요소는 * 셀렉터에도 매칭되지 않습니다.

3.2 섀도 DOM 셀렉터

Shadow DOM은 섀도 DOM과 관련된 요소들을 선택하는 데 유용한 몇 가지 새로운 셀렉터를 정의합니다.

이 섹션은 아직 논의 중입니다. 아래 기능에 대한 직관적인 문법에 대한 피드백과 조언을 환영합니다.

3.2.1 외부 선택: :host, :host(), :host-context() 의사 클래스

:host 의사 클래스는 섀도 트리의 컨텍스트에서 평가될 때, 그 섀도 트리의 호스트 요소를 일치시킵니다. 다른 컨텍스트에서는 아무것도 일치시키지 않습니다.

:host() 함수형 의사 클래스의 문법은 다음과 같습니다:

:host( <compound-selector> )

섀도 트리의 컨텍스트에서 평가될 때, 섀도 트리의 호스트 요소가 해당 셀렉터 인자와 일반 컨텍스트에서 일치한다면 일치됩니다. 다른 컨텍스트에서는 아무것도 일치시키지 않습니다.

  <x-foo class="foo">
    <"shadow tree">
      <div class="foo">...</div>
    </>
  </x-foo>

일반적으로, 섀도 트리 내의 셀렉터는 섀도 트리 외부의 요소를 전혀 볼 수 없습니다. 그러나 때로는 섀도 트리 위쪽, 문서 내의 조상 요소를 선택해야 할 때가 있습니다.

:host-context() 함수형 의사 클래스는 섀도 트리 외부의 조상 중 특정 셀렉터와 일치하는 요소가 있는지 검사합니다. 문법은 다음과 같습니다:

:host-context( <compound-selector> )

섀도 트리 컨텍스트에서 평가될 때, :host-context() 의사 클래스는 호스트 요소에 적용되며, 호스트 요소 또는 그 조상 중 셀렉터와 일치하는 것이 있으면 일치합니다. 이 의사 클래스에서 "조상"의 정의는 다음과 같습니다:

요소가 분배 리스트로 분배된 경우

최종적으로 분배된 content 요소

요소가 섀도 트리의 최상위 요소인 경우

호스트 요소

그 외의 경우

요소의 부모(있는 경우)

참고: 이 셀렉터는 문서 루트까지 위로 올라가면서 인자로 전달된 셀렉터와 일치하는 요소를 찾기 위해 섀도 경계를 관통합니다.

3.2.2 어둠 속 선택: ::shadow 의사 요소

요소에 하나 이상의 섀도 트리가 있는 경우, ::shadow 의사 요소는 섀도 루트 자체와 일치합니다. HTML에서 섀도 루트는 ShadowRoot 객체로 표현됩니다.

::shadow 의사 요소는 다른 명세에서 별도로 지정하지 않는 한 박스를 생성하지 않아야 합니다. 그러나 셀렉터 관점에서는, ::shadow 의사 요소가 섀도 트리의 루트로 간주되며, 섀도 트리의 최상위 요소들이 ::shadow 의사 요소의 직접 자식이 됩니다.

  <x-foo>
    <"shadow tree">
      <div>
        <span id="not-top">...</span>
      </div>
      <span id="top">...</span>
    </>
  </x-foo>

3.2.3 섀도 투영 콘텐츠 선택: ::content 의사 요소

::content 의사 요소는 분배 리스트가 있는 요소에서 해당 분배 리스트 자체와 일치합니다.

::content는 섀도 트리의 투영된 콘텐츠에만 해당하는 것임에도 불구하고 혼동을 줄 수 있을 만큼 일반적인 이름입니다.

::content 의사 요소는 다른 명세에서 별도로 지정하지 않는 한 박스를 생성하지 않아야 합니다. 그러나 셀렉터 관점에서는, ::content 의사 요소가 분배 리스트 내 요소들의 부모로 간주됩니다.

  <x-foo>
    <div id="one" class="foo">...</div>
    <div id="two">...</div>
    <div id="three" class="foo">
      <div id="four">...</div>
    </div>
    <"shadow tree">
      <div id="five">...</div>
      <div id="six">...</div>
      <content select=".foo"></content>
    </"shadow tree">
  </x-foo>

3.2.4 섀도 관통 선택: /deep/ 결합자

셀렉터에서 /deep/ 결합자가 등장하면, 셀렉터 매치 리스트의 각 요소를 원래 요소에서 자식 리스트나 섀도 트리를 임의의 깊이로 따라가 도달할 수 있는 모든 요소로 대체합니다.

  <x-foo>
    <"shadow tree">
      <div>
        <span id="not-top">...</span>
      </div>
      <span id="top">...</span>
      <x-bar>
        <"shadow tree">
          <span id="nested">...</span>
        </>
      </x-bar>
    </>
  </x-foo>

이것은 기본적으로 슈퍼-자손 결합자입니다. 만약 자손 결합자에 진짜 글리프가 있었다면, 두 번 연속 표기하는 것도 흥미로웠을 것입니다. 자손 결합자에 >>라는 별칭을 주는 것도 고려할 수 있지 않을까요? 그럼 /deep/은 >>>로 표기할 수도 있습니다.

3.3 섀도 계단식 & 상속

3.3.1 계단식

섀도 루트 내 요소를 대상으로 하는 규칙의 원하는 계단식 동작을 위해, 본 명세서는 Cascade 명세에서 정의한 계단식 순서를 확장합니다. [CSS3CASCADE]

Origin과 Scope 사이에 Shadow Tree라는 추가 계단식 기준을 추가해야 합니다.

• 두 선언을 비교할 때, 하나는 섀도 트리에 있고 다른 하나는 해당 섀도 트리를 포함하는 문서에 있다면, 일반 규칙의 경우 외부 문서의 선언이 이기고, !important 규칙의 경우 섀도 트리의 선언이 이깁니다.

  참고: 이는 범위 지정 스타일 방식과 반대입니다.

• 두 선언 모두 동일한 호스트 요소의 섀도 트리에 있을 때, 일반 규칙의 경우 가장 최근에 생성된 섀도 트리의 선언이 이기고, !important 규칙의 경우 덜 최근에 생성된 섀도 트리의 선언이 이깁니다.

등장 순서를 계산할 때, Shadow DOM 명세에서 정의한 tree of trees 구조를 사용하여 순서가 결정됩니다.

3.3.2 상속

섀도 트리의 최상위 요소들은 자신의 호스트 요소로부터 상속받습니다.

분배 리스트 내 요소들은 최종적으로 분배된 content 요소의 부모로부터 상속받으며, 원래의 부모가 아닙니다.

4 분할 스타일링

분할된 콘텐츠는 등장하는 줄, 칼럼, 페이지, 영역 등에 따라 다르게 스타일링할 수 있습니다. 이는 적절한 fragment 의사 요소를 사용하여 구현할 수 있으며, 이를 통해 전체 요소가 아닌 개별 조각만을 선택적으로 스타일링할 수 있습니다.

예제에서, 디자이너는 #region1로 흐르는 텍스트를 짙은 파란색과 굵게 만들고자 합니다. 이 디자인은 아래와 같이 표현할 수 있습니다.

#region1::region p {
  color: #0C3D5F;
  font-weight: bold;
}

이 예시에서 ::region 의사 요소 뒤에 p 상대 셀렉터가 옵니다. color와 font-weight 선언은 #region1에 표시되는 단락 조각(fragment)에 적용됩니다. 아래 그림은 #region1에만 적용된 이 스타일링이 렌더링을 어떻게 변경시키는지 보여줍니다. 이제 font-weight가 보통(normal) 대신 굵게(bold)로 적용되어 상자에 들어가는 텍스트가 더 적어진 점에 주목하세요.

참고: 이 기능은 ::first-line 스타일링의 확장입니다.

4.1 영역 기반 스타일링: ::region 의사 요소

::region 의사 요소는 CSS Region과 일치하는 선택자와, 특정 명명된 플로우 콘텐츠와 일치하는 상대 선택자 간의 관계를 나타냅니다. 이를 통해 특정 영역으로 흐르는 명명된 플로우 콘텐츠의 조각(fragment)에 스타일 선언을 적용할 수 있습니다.

<region selector>::region <content selector>  {
    ... CSS styling declarations ...
}

::region 의사 요소가 하나 이상의 CSS Regions과 일치하는 선택자에 덧붙여질 때, 이는 '플로우 조각(flow fragment)' 선택자를 생성합니다. 플로우 조각 선택자는 상대 선택자가 일치할 수 있는 플로우 내 요소의 범위를 지정합니다. 상대 선택자는 선택된 영역들에 완전히 또는 부분적으로 표시되는 명명된 플로우의 범위(들)(참조 [DOM]) 내의 요소와 일치할 수 있습니다.

플로우 조각 범위에 완전히 또는 부분적으로 있는 요소들은 상대 선택자와 일치할 수 있습니다. 그러나 스타일 선언은 해당 영역들에 표시되는 요소의 조각에만 적용됩니다.

::region 의사 요소에는 제한된 속성 목록만 적용됩니다:

이 목록은 기능적으로 상속 가능한 모든 속성이거나, 아니면 모든 속성이어야 합니다. 왜 상자 속성을 포함한 속성들의 임의의 하위집합처럼 보이는 걸까요?

1. 글꼴 속성(font properties)
2. 색상 속성(color property)
3. 불투명도 속성(opacity property)
4. 배경 속성(background property)
5. word-spacing
6. letter-spacing
7. text-decoration
8. text-transform
9. line-height
10. 정렬 및 정당화 속성(alignment and justification properties)
11. 테두리 속성(border properties)
12. 둥근 모서리 속성(rounded corner properties)
13. 테두리 이미지 속성(border images properties)
14. 여백 속성(margin properties)
15. 패딩 속성(padding properties)
16. text-shadow
17. box-shadow
18. box-decoration-break
19. width

다음 예에서, 명명된 플로우 "article-flow"는 "region-1"과 "region-2"로 흐릅니다.

<style>
  #div-1 {
    flow-into: article-flow;
  }

  #region-1, #region-2 {
    flow-from: article-flow;
  }

  /* region styling */
  #region-1::region p  {
    margin-right: 5em;
  }
</style>

<body>
  <div id="div-1">
      <p id="p-1">...</p>
      <p id="p-2">...</p>
  </div>
  <div id="region-1"></div>
  <div id="region-2"></div>
</body>

• div div-1
• paragraph p-1
• paragraph p-2
• region-1에 맞는 플로우 범위(range of flow that fits into region-1)
• region-2에 맞는 플로우 범위(range of flow that fits into region-2)

영역 스타일링은 region-1에 들어맞는 플로우 콘텐츠에 적용됩니다. 상대 선택자는 이 단락들이 region-1로 흘러들어가기 때문에 p-1과 p-2와 일치합니다. p-2의 오직 region-1로 흘러들어가는 조각만이 의사 요소로 스타일링됩니다.

::region 의사 요소의 모든 선택자들은 그 의사 요소의 특이성(specificity)에 기여합니다. 위 예에서 ::region 의사 요소의 특이성은 id 선택자의 특이성과 타입 선택자의 특이성이 결합되어 101의 특이성을 갖게 됩니다.

위에서 설명한 바와 같이 주어진 요소 또는 요소 조각과 일치하는 선택자들은 CSS 계단식 순서에 참여합니다(참조 [CSS21]).

특정 영역에 있는 조각의 스타일을 조회할 방법이 필요합니다. getComputedStyle()만으로는 충분하지 않습니다. 요소는 여러 영역에 존재할 수 있으며, 각 조각이 서로 다른 스타일을 받을 수 있기 때문입니다.

적합성(Conformance)

문서 규약

적합성 요구사항은 설명적 주장과 RFC 2119 용어의 결합으로 표현됩니다. 규범적 부분에 등장하는 "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", 및 "OPTIONAL" 같은 키워드는 RFC 2119에 설명된 대로 해석되어야 합니다. 다만 가독성을 위해 이 명세서에서는 이러한 단어들을 모두 대문자로 표기하지 않을 수 있습니다.

이 명세서의 모든 텍스트는 비규범으로 명시된 섹션, 예제, 그리고 노트를 제외하고는 규범적입니다. [RFC2119]

이 명세서의 예제는 "for example"이라는 단어로 소개되거나 class="example"로 규범적 텍스트와 구분됩니다.

정보성 노트는 "Note"로 시작하며 class="note"로 규범적 텍스트와 구분됩니다.

참고: 이것은 정보성 노트입니다.

적합성 클래스

이 명세서에 대한 적합성은 세 가지 적합성 클래스로 정의됩니다:

스타일 시트(style sheet)

CSS 스타일 시트(참조).

렌더러(renderer)

스타일 시트의 의미를 해석하고 문서를 렌더링하는 UA(참조).

저작 도구(authoring tool)

스타일 시트를 작성하는 UA(참조).

스타일 시트는 이 모듈에서 정의된 문법을 사용하는 모든 문장이 일반 CSS 문법과 각 기능의 개별 문법에 따라 유효하면 이 명세에 적합합니다.

렌더러는 적절한 명세에 정의된 대로 스타일 시트를 해석하는 것 외에도, 이 명세에서 정의한 모든 기능을 올바르게 구문 분석하고 문서를 적절히 렌더링함으로써 이 명세에 적합합니다. 다만 장치의 한계로 인해 문서를 올바르게 렌더링하지 못하는 경우에는 비적합으로 보지 않습니다.

저작 도구는 이 모듈의 각 기능에 대한 일반 CSS 문법과 개별 문법에 따라 구문적으로 올바른 스타일 시트를 작성하고, 이 모듈에 기술된 다른 모든 스타일 시트 적합성 요구사항을 충족하면 이 명세에 적합합니다.

부분 구현

작성자가 포워드-호환적 파싱 규칙을 이용하여 폴백 값을 활용할 수 있도록, CSS 렌더러는 지원 수준이 없는 at-rule, 속성, 속성값, 키워드 및 기타 문법적 구성은 무효로 처리(적절히 무시)해야 합니다. 특히 UA는 지원하지 않는 구성요소 값 때문에 어느 값이라도 무효로 간주되는 경우, 동일한 다중값 속성 선언 내의 지원되는 값을 선택적으로 무시하고 인정해서는 안 됩니다: 어떤 값이라도 무효로 간주되면 전체 선언은 무시되어야 합니다.

실험적 구현

향후 CSS 기능과 충돌을 피하기 위해, CSS2.1 명세는 독점적이고 실험적인 확장을 위한 접두사 문법을 예약합니다.

명세가 W3C 프로세스에서 후보 권고(Candidate Recommendation) 단계에 도달하기 전까지, 해당 CSS 기능의 모든 구현은 실험적입니다. CSS 작업 그룹은 작업 초안에 포함된 기능을 포함한 이러한 기능들의 구현에 대해 벤더 접두사 문법 사용을 권장합니다. 이는 초안의 향후 변경과의 비호환을 피합니다.

비실험적 구현

명세가 후보 권고 단계에 도달하면 비실험적 구현이 가능해지며, 구현자는 명세에 따라 올바르게 구현되었음을 입증할 수 있는 CR 수준 기능에 대해 무접두사 구현을 릴리스해야 합니다.

CSS의 상호 운용성을 확립하고 유지하기 위해, CSS 작업 그룹은 비실험적 CSS 렌더러가 무접두사 구현을 릴리스하기 전에 W3C에 구현 보고서(및 필요한 경우 해당 구현 보고서에 사용된 테스트케이스)를 제출할 것을 요청합니다. 제출된 테스트케이스는 CSS 작업 그룹의 검토와 수정 대상이 됩니다.

테스트케이스 및 구현 보고서 제출에 대한 추가 정보는 CSS 작업 그룹 웹사이트의 http://www.w3.org/Style/CSS/Test/에서 확인할 수 있습니다. 질문은 public-css-testsuite@w3.org 메일링 리스트로 보내십시오.

참고 문헌(References)

규범적 참고 문헌(Normative References)

정보성 참고 문헌(Informative References)

색인(Index)

속성 색인(Property index)

이슈 색인(Issues Index)

:scope-context(<selector>) div {...}
scope(<selector>) div {...}
\scope <selector>\ div {...}
<selector> \scope\ div {...}