구성 가능한 스타일시트

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

Jason Miller

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

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 101.
  • Safari: 16.4.

Source

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

작성된 CSS에서 인스턴스화, 애플리케이션으로의 흐름을 보여주는 다이어그램

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

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

스타일 시트 구성

이를 위해 새로운 API를 도입하는 대신 구성 가능한 스타일시트 사양을 사용하면 CSSStyleSheet() 생성자를 호출하여 스타일시트를 명령형으로 만들 수 있습니다. 결과 CSSStyleSheet 객체에는 스타일이 지정되지 않은 콘텐츠의 플래시 (FOUC)를 트리거하지 않고 스타일시트 규칙을 더 안전하게 추가하고 업데이트할 수 있는 두 가지 새로운 메서드가 있습니다. replace() 및 replaceSync() 메서드는 모두 스타일시트를 CSS 문자열로 대체하고 replace()는 프로미스를 반환합니다. 두 경우 모두 외부 스타일시트 참조는 지원되지 않습니다. @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..."

구성된 스타일시트 사용

Constructable StyleSheets에서 도입한 두 번째 새로운 기능은 Shadow Roots 및 Documents에서 사용할 수 있는 adoptedStyleSheets 속성입니다. 이렇게 하면 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);

요약 정리

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

데모 보기

향후 계획

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

추가 정보