이 페이지는 Cloud Translation API를 통해 번역되었습니다.

작성자 정의 CSS 이름 및 Shadow DOM: 사양 및 실제

Noam Rosenthal

작성 정의된 CSS 이름과 Shadow DOM은 함께 작동해야 합니다. 하지만 브라우저는 사양과 일치하지 않을 수 있으며, 경우에 따라 각 브라우저의 모든 CSS 이름은 약간 다른 방식으로 일관성이 없습니다.

이 도움말에서는 작성자 정의 CSS 이름의 작동 방식에 대한 현재 상태를 설명합니다. 섀도우 스펙트럼을 넓히고, AI를 개선할 수 있는 상호 운용성의 개념이 개발될 예정입니다.

작성자 정의 CSS 이름이란 무엇인가요?

작성자 정의 CSS 이름은 비교적 오래된 CSS 구문 메커니즘으로 <keyframe-name>를 다음과 같이 정의하는 @keyframes 규칙에 도입됩니다. 커스텀 ID 또는 문자열입니다. 이 개념의 목적은 다른 부분에서 참조할 수 있습니다.

/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
  from { opacity: 0 };
  to { opacity: 1 }
}

.card {
  /* "fade-in" is a reference to the above keyframes */
  animation-name: fade-in;
}

CSS 이름을 사용하는 다른 CSS 기능으로는 글꼴, 속성 선언, 그리고 최근에는 조회 전환, 앵커 포지셔닝 및 사용할 수 있습니다. 다음의 포괄적이지 않은 테이블에 이름이 포함되어 있습니다. Chrome에서 상태를 확인합니다

기능	이름 선언	이름 참조
키프레임	`@keyframes`	`animation-name`
글꼴	`@font-face { }` `@font-palette-values`	`font-family` `font-palette`
속성 선언	`@property`	모든 맞춤 속성
전환 보기	`view-transition-name` `view-transition-class`	`::view-transition-group()`
앵커 배치	`anchor-name`	`position-anchor`
스크롤 기반 애니메이션	`animation-timeline`	`view-timeline-name` `scroll-timeline-name`
카운터 스타일	`@counter-style` `Counter-reset` `counter-set` `counter-increment`	`list-style`
컨테이너 쿼리	`container-name`	`@container`
CSS 변수	`--something`	`var(--something)`
페이지	`@page`

표에서 볼 수 있듯이 CSS name에는 일반적으로 상응하는 CSS가 있습니다. 참조. 예를 들어 animation-name는 @keyframes의 참조입니다. 있습니다. CSS 이름은 DOM에서 정의된 이름과 다릅니다(예: 속성). 및 태그 이름을 선언한 다음 할 수 있습니다.

이름이 Shadow DOM과 연결되는 방식

CSS 이름은 Shadow DOM이 그 반대를 하도록 만들어졌습니다. 다른 데이터가 유출되지 않도록 관계를 캡슐화합니다. 여러 웹 구성요소에 대한 액세스를 제공합니다

CSS 이름과 Shadow DOM을 함께 사용하여 작성 경험 웹 구성 요소는 유연하지만 제약이 있을 정도로 표현력이 좋아야 합니다. 충분히 크지 않습니다.

이것은 이론적으로는 바람직합니다. 실제로 브라우저는 CSS가 이름은 Shadow DOM과 상호 운용되며 동일한 브라우저 간, 기능과 사양 간 차이점에 관해 자세히 알아보세요.

이름과 Shadow DOM이 함께 작동하는 방식

문제를 이해하려면 CSS의 이러한 부분이 어떻게 이론적으로 함께 작동해야 합니다

일반적인 규칙

섀도우 트리에서 CSS 이름이 작동하는 방식에 대한 일반적인 규칙은 CSS 범위 지정 수준 1 사양 요약: CSS 이름은 정의된 범위 내에서 전역적입니다. 즉, 하위 섀도우 트리에서는 액세스할 수 있지만 동위 요소나 섀도우 트리에서는 액세스할 수 없습니다. 상위 그림자 트리입니다. 이것은 웹 플랫폼의 이름과는 달리 요소 ID로, 동일한 트리 범위 내에 캡슐화됩니다.

규칙 예외: `@property`

다른 CSS 이름과 달리 CSS 속성은 Shadow DOM에 의해 캡슐화되지 않습니다. 오히려 서로 다른 그림자 간에 매개변수를 전달하는 일반적인 방법입니다. 수 있습니다. 이렇게 하면 @property 설명어 특수 문자를 사용하면 는 이름이 지정된 특정 속성의 작동 방식을 정의합니다. 숙박 시설이 일치해야 하므로 섀도우 트리에서 속성 선언의 불일치로 인해 예상치 못한 결과, @property 선언이 평면화 및 확인되도록 지정됩니다. 문서 순서에 따라 처리됩니다.

`::part`에서 규칙이 작동하는 방식

그림자 부분 섀도우 트리 내부의 요소를 상위 트리에 노출합니다. 이렇게 하면 상위 트리는 이 요소에 액세스하고 ::part를 사용하여 스타일을 지정할 수 있습니다. 요소가 포함됩니다.

::part를 사용하면 두 트리 범위에서 동일한 요소의 스타일을 지정할 수 있습니다. 계단식 순서가 지정됩니다.

먼저 그림자 컨텍스트 내에서 스타일을 확인합니다. '기본값'입니다. 변경할 수 있습니다.
그런 다음 ::part에 정의된 대로 외부 스타일을 적용합니다. 이것은 "맞춤설정됨" 변경할 수 있습니다.
그런 다음 !important와 함께 정의된 내부 스타일을 적용합니다. 이렇게 하면 사용자설정 요소가 특정 부분은 ::part에서 맞춤설정할 수 없습니다.

즉, Shadow DOM 내의 이름은 ::part: ::part는 섀도우 범위가 아닌 호스트 범위 스타일이므로 있습니다. 예를 들면 다음과 같습니다.

// inside the shadow DOM:
@keyframes fade-in {
  from { opacity: 0}
}

// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
  animation-name: fade-in;  
}

규칙이 인라인 스타일에서 작동하는 방식

::part와 달리 style 속성이 있는 인라인 스타일이나 스크립트를 사용하여 프로그래매틱 방식으로 스타일을 설정하며, 요소의 범위가 지정할 수 있습니다 왜냐하면 요소에 스타일을 적용하려면 따라서 섀도우 루트 자체에도 적용됩니다.

CSS 이름과 Shadow DOM이 실제로 함께 작동하는 방식

앞의 규칙은 잘 정의되어 있고 일관되지만, 현재 구현이 항상 이를 반영하는 것은 아닙니다. 실제로 @property는 일관된 방식으로 사양과 다르게 작동합니다. 대부분의 다른 기능에는 미해결 버그가 있습니다. 그 중 일부는 아직 출시되지 않았으므로 수정할 시간이 있습니다).

이러한 기능이 실제로 어떻게 작동하는지 테스트하고 보여주기 위해 다음 페이지를 참조하세요. https://css-names-in-the-shadow.glitch.me/. 이 페이지에는 여러 iframe이 있으며 각 iframe에서는 기능 중 하나에 중점을 두고 6개의 테스트를 실행합니다. 시나리오:

외부 이름에 대한 외부 참조: Shadow DOM이 필요하지 않으며 있습니다
내부 이름에 대한 외부 참조: 내부 이름에 대한 외부 참조 섀도우 컨텍스트에 정의된 이름이 유출되었음을 의미합니다.
외부 이름에 대한 내부 참조: 트리 범위 이름으로 작동합니다. 섀도우 루트에 의해 상속됩니다
내부 이름에 대한 내부 참조: 내부 이름에 대한 참조는 동일한 범위에 속합니다
외부 이름에 대한 ::part 참조: ::part 이름이 동일한 범위에서 선언됩니다.
내부 이름에 대한 ::part 참조: 외부 범위이므로 작동하지 않아야 합니다. Shadow DOM 내에서 선언된 이름에 대해 알지 못해서는 안 됩니다.

`@keyframes`

사양에 정의된 대로 키프레임 이름을 참조해서 @keyframes 규칙이 상위에 있는 경우 섀도 루트 내에서 범위를 제공합니다 실제로 어떤 브라우저도 이러한 동작을 구현하지 않으며 키프레임은 정의는 정의된 범위에서만 참조할 수 있습니다. 자세한 내용은 문제 10540

`@property`

사양에 정의된 대로 @property 선언은 다음과 같습니다. 문서 범위로 병합됩니다. 하지만 이제는 모든 브라우저에서 문서 범위에서 @property 선언 및 @property 선언은 섀도우 루트는 무시됩니다.
문제 10541을 참고하세요.

브라우저별 버그

다른 기능은 브라우저에서 일관된 동작을 보여주지 않습니다.

@font-face는 Safari에서 루트 범위로 평면화됩니다.
Chromium은 섀도 루트에서 @anchor-name 규칙 상속을 허용하지 않습니다.
@scroll-timeline-name 및 @view-timeline-name의 범위가 올바르게 지정되지 않음 ::part (Chromium에서도 표시됨)
섀도 루트에서 @font-palette-values를 선언하는 브라우저가 없습니다.
view-transition-class는 섀도우 루트 (전환) 내에서 정의할 수 있습니다. 자체는 shadow-root 외부에 있습니다.
Firefox는 ::part에서 내부 그림자 이름 (컨테이너 쿼리, 있습니다.
Firefox 및 Safari는 섀도우 루트에서 @counter-style를 따르지 않습니다.

counter-reset, counter-set, counter-increment는 암시적 이름이고 CSS 속성을 선언하기 때문에 규칙이 서로 다릅니다. 잘 검증된 규칙 집합을 사용하는 것이 좋습니다.

결론

나쁜 소식은 현재 상호운용성 상태의 스냅샷을 검사할 때 CSS 이름과 Shadow DOM의 경우 경험이 일관되지 않으며 버그입니다. 여기에서 조사한 기능 중 어느 것도 전체적으로 일관되게 작동하지는 않습니다. 사양에 따라 새 브라우저로 전송할 수 있습니다. 다행인 점은 일관된 경험을 제공하는 델타는 유한하다는 점입니다. 버그 및 사양 문제 목록입니다. 이 문제를 해결해 보겠습니다. 그동안 이 개요는 계정 관리 문제를 해결하는 데 불일치에 대해 살펴보겠습니다.