구성 가능한 스타일시트

원활한 재사용 가능한 스타일

Jason Miller

구성 가능한 스타일시트는 ShadowDOM을 사용할 때 재사용 가능한 스타일을 만들고 배포하는 방법입니다.

JavaScript를 사용하여 스타일시트를 만드는 것은 항상 가능했습니다. 그러나 이 프로세스는 역사적으로 <style>을 사용하여 document.createElement('style') 요소를 만든 다음 시트 속성에 액세스하여 기본 CSSStyleSheet 인스턴스에 대한 참조를 가져오는 것이었습니다. 이 메서드는 중복된 CSS 코드와 관련 블로트를 생성할 수 있으며, 블로트가 있든 없든 연결 작업으로 인해 스타일이 지정되지 않은 콘텐츠가 깜박입니다. CSSStyleSheet 인터페이스는 CSSOM이라고 하는 CSS 표현 인터페이스 모음의 루트이며, 스타일시트를 프로그래매틱 방식으로 조작하는 방법과 이전 메서드와 관련된 문제를 해결하는 방법을 제공합니다.

구성 가능한 스타일시트를 사용하면 공유 CSS 스타일을 정의하고 준비한 다음 이러한 스타일을 여러 Shadow Root 또는 문서에 중복 없이 쉽게 적용할 수 있습니다. 공유 CSSStyleSheet 업데이트는 채택된 모든 루트에 적용되며, 스타일시트 채택은 시트가 로드되면 빠르고 동기화됩니다.

구성 가능한 스타일시트로 설정된 연결은 여러 애플리케이션에 적합합니다. 많은 구성요소에서 사용하는 중앙 집중식 테마를 제공하는 데 사용할 수 있습니다. 테마는 구성요소에 전달되는 CSSStyleSheet 인스턴스일 수 있으며, 테마 업데이트는 구성요소에 자동으로 전파됩니다. 캐스케이드에 의존하지 않고 CSS 맞춤 속성 값을 특정 DOM 하위 트리에 배포하는 데 사용할 수 있습니다. 브라우저의 CSS 파서에 대한 직접 인터페이스로도 사용할 수 있으므로 DOM에 삽입하지 않고 스타일시트를 쉽게 미리 로드할 수 있습니다.

스타일시트 구성

이를 위해 새로운 API를 도입하는 대신 구성 가능한 스타일시트 사양을 사용하면 CSSStyleSheet() 생성자를 호출하여 스타일시트를 명령형으로 만들 수 있습니다. 결과 CSSStyleSheet 객체에는 스타일이 지정되지 않은 콘텐츠 깜박임 (FOUC)을 트리거하지 않고 스타일시트 규칙을 추가하고 업데이트하는 데 더 안전한 두 가지 새로운 메서드가 있습니다. replace() 및 replaceSync() 메서드는 모두 스타일시트를 CSS 문자열로 바꾸고 replace() 는 Promise를 반환합니다. 두 경우 모두 외부 스타일시트 참조는 지원되지 않습니다. @import 규칙은 무시되고 경고가 생성됩니다.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// replace all styles:
sheet.replace('a { color: blue; }')
  .then(() => {
    console.log('Styles replaced');
  })
  .catch(err => {
    console.error('Failed to replace styles:', err);
  });

// Any @import rules are ignored.
// Both of these still apply the a{} style:
sheet.replaceSync('@import url("styles.css"); a { color: red; }');
sheet.replace('@import url("styles.css"); a { color: red; }');
// Console warning: "@import rules are not allowed here..."

구성된 스타일시트 사용

구성 가능한 스타일시트에서 도입한 두 번째 새로운 기능은 adoptedStyleSheets 속성으로, Shadow Root 및 문서에서 사용할 수 있습니다. 이를 통해 CSSStyleSheet에서 정의한 스타일을 지정된 DOM 하위 트리에 명시적으로 적용할 수 있습니다. 이렇게 하려면 속성을 해당 요소에 적용할 하나 이상의 스타일시트 배열로 설정합니다.

// Create our shared stylesheet:
const sheet = new CSSStyleSheet();
sheet.replaceSync('a { color: red; }');

// Apply the stylesheet to a document:
document.adoptedStyleSheets.push(sheet);

// Apply the stylesheet to a Shadow Root:
const node = document.createElement('div');
const shadow = node.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(sheet);

요약 정리

구성 가능한 스타일시트를 사용하면 웹 개발자가 이제 CSS StyleSheets를 만들고 DOM 트리에 적용하는 명시적 솔루션을 사용할 수 있습니다. 브라우저의 기본 파서 및 로드 시맨틱스를 사용하는 CSS 소스 문자열에서 스타일시트를 로드하기 위한 새로운 프로미스 기반 API가 있습니다. 마지막으로 스타일시트 업데이트를 StyleSheet의 모든 용도에 적용하는 메커니즘이 있어 테마 변경 및 색상 환경설정과 같은 작업을 간소화합니다.

데모 보기

향후 계획

구성 가능한 스타일시트의 초기 버전은 여기에 설명된 API와 함께 제공되었지만 사용하기 쉽게 만드는 작업이 진행 중입니다. 스타일시트를 삽입하고 삭제하는 전용 메서드로 adoptedStyleSheets FrozenArray를 확장하는 제안이 있습니다. 이렇게 하면 배열 클로닝이 필요하지 않고 스타일시트 참조가 중복될 가능성을 방지할 수 있습니다.

추가 정보

• Chrome 플랫폼 상태
• 예
• API
• 설명 동영상
• 구현 의도
• 배송 의도
• Discourse