CSS @scope 생성기

사용 방법

1. 1

   스코프 루트 입력하기

   스코프가 시작되는 요소의 선택자를 .card나 [data-theme='dark']처럼 입력합니다. 필수입니다.

2. 2

   필요하면 스코프 경계 추가하기

   스코프가 끝나야 하는 지점의 선택자를 .card__footer처럼 입력합니다. 비워 두면 모든 자손을 포함하는 경계 없는 스코프가 됩니다.

3. 3

   규칙과 샘플 페이지 확인하기

   결과에 규칙이 나타나고, 그 아래 샘플 페이지가 입력한 선택자로 칠해집니다. 청록은 스코프 루트, 라임은 스코프가 닿는 요소, 빗금 분홍은 경계에서 잘려 나간 요소입니다. 입력이 올바르지 않으면 마지막으로 유효했던 규칙이 흐리게 남습니다.

4. 4

   블록 복사하기

   @scope 규칙을 복사해 스타일시트에 붙여 넣습니다. 자리표시 주석만 있는 빈 블록이 필요하면 시작용 규칙을 끄세요.

5. 5

   안쪽에는 짧은 선택자 쓰기

   시작용 규칙이나 자리표시 주석을 h2 { ... }나 :scope > img { ... } 같은 규칙으로 채웁니다. 이 선택자들은 루트를 기준으로 매칭됩니다.

작동 원리

@scope (.card) to (.card__footer) {
  /* Scoped component styles */
}

실제 예시

루트 `.card`, 경계 `.card__footer`, 시작용 규칙 켬

@scope (.card) to (.card__footer) {
  :scope {
    /* the .card element itself */
  }
  a {
    /* only links below the root, outside the limit */
  }
}

루트 `.article`, 경계 비움, 시작용 규칙 끔

@scope (.article) {
  /* Scoped component styles */
}

루트 `[data-theme='dark']`, 경계 `figure, .embed`, 시작용 규칙 끔

@scope ([data-theme='dark']) to (figure, .embed) {
  /* Scoped component styles */
}

루트 `.card{}`, 경계 비움

루트 칸 오류: 중괄호·세미콜론·줄바꿈을 지워 주세요. 선택자는 규칙 블록이 아니라 괄호 안에 들어갑니다.

루트 `.card[`, 경계 비움

루트 칸 오류: 괄호나 대괄호, 따옴표가 닫히지 않았습니다.

자주 하는 실수

• 브라우저 지원은 확인이 필요합니다

  Chrome과 Safari는 각각 2023년과 2024년 초부터 @scope를 지원했고 Firefox는 비교적 최근에 추가했습니다. 대체 수단 없이 쓰기 전에 최신 호환성 표를 확인하세요.

• 경계는 그 요소 자체를 제외합니다

  경계 선택자에 일치하는 요소와 그 자손은 스코프의 스타일을 받지 않습니다. 자손만 빠진다고 생각했다가 경계 요소 자체의 스타일이 사라져서 당황하는 경우가 많습니다.

• 스코프가 바깥 스타일을 막아 주지는 않습니다

  @scope는 내 규칙이 루트 밖으로 나가지 못하게 할 뿐, 전역 스타일이나 상속 속성이 안으로 들어오는 것은 막지 않습니다. 스타일시트 전체의 우선순위 정리에는 캐스케이드 레이어를 쓰세요.

• 유효 여부는 브라우저에 따라 달라집니다

  지금 쓰는 브라우저의 선택자 파서로 확인하므로, 최신 엔진만 이해하는 선택자는 여기서 오류로 표시되어도 다른 곳에서는 동작할 수 있습니다. 점이 빠진 것은 오류가 아닙니다. card는 올바른 타입 선택자일 뿐이고 대부분의 페이지에서 아무것에도 일치하지 않습니다.

• :scope를 루트로 쓰는 경우

  생성기는 :scope를 루트로 받아 @scope (:scope)를 써 주지만, 일반 스타일시트에서는 의미 있는 스코프 루트가 없습니다. 실제 선택자를 쓰세요.

자주 묻는 질문