구성 가능한 스타일시트

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

Jason Miller

생성 가능한 스타일시트는 그림자 사용 시 재사용 가능한 스타일을 생성하고 배포하는 방법 DOM을 사용하는 것이 좋습니다.

예전에는 JavaScript를 사용하여 스타일시트를 만들 수 있었습니다. 그러나 프로세스는 역사적으로 <style> 요소를 사용하여 document.createElement('style')로 설정한 다음 시트 속성에 액세스하여 참조는 기본 CSSStyleSheet 인스턴스를 만들 수 있습니다 이 방법은 중복 CSS 코드와 그에 수반되는 팽창을 발생시킬 수 있습니다. 첨부하는 동작으로 스타일이 지정되지 않은 콘텐츠를 문제가 발생할 수 있습니다. CSSStyleSheet 인터페이스는 CSSOM이라고 하는 CSS 표현 인터페이스 모음의 루트이며, 스타일시트를 프로그래매틱 방식으로 조작할 수 있는 방법을 제공하고 이전 메서드와 관련된 문제를 제거합니다.

구성 가능한 스타일시트를 사용하면 공유 CSS를 정의하고 준비할 수 있습니다. 스타일을 선택한 다음 해당 스타일을 여러 그림자 루트 또는 문서 데이터를 복제하지 않아도 됩니다 공유 CSSStyleSheet의 업데이트는 채택된 모든 루트에 적용되며 스타일시트 채택은 시트가 로드된 후 빠르고 동기식입니다.

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

스타일시트 구성

이를 위해 새로운 API를 도입하는 대신 Structable StyleSheets 사양을 사용하면 CSSStyleSheet() 생성자 결과 CSSStyleSheet 객체에는 두 개의 더욱 안전하게 스타일 시트 규칙을 추가하고 업데이트할 수 있게 해주는 트리거 Flash of Unstyled 콘텐츠 (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..."

구성된 스타일시트 사용

생성 가능한 스타일 시트에 도입된 두 번째 새로운 기능은 adoptedStyleSheets Shadow에서 사용할 수 있는 속성) 루츠 및 문서를 참조하세요. 이 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 스타일 시트를 만들고 DOM 트리에 적용하는 명시적인 솔루션을 사용할 수 있습니다. 새로운 를 사용하는 CSS 소스 문자열에서 StyleSheets를 로드하기 위한 프라미스 기반 API 의미론을 로드할 수 있기 때문입니다. 마지막으로 StyleSheet의 모든 사용에 스타일 시트 업데이트를 적용하는 메커니즘, 테마 변경이나 색상 환경설정 등을 단순화하는 것입니다.

데모 보기

향후 계획

API와 함께 제공되는 구성 가능한 스타일시트의 초기 버전 사용 편의성을 높이기 위해 계속 노력하고 있습니다. 이 제안서를 삽입 및 삽입을 위한 전용 메서드가 있는 adoptedStyleSheets FrozenArray 배열 복제를 불필요하게 하고 중복 가능성이 있는 스타일시트 참조.

추가 정보

• Chrome 플랫폼 상태
• 예
• API
• 설명 자료
• 구현 의도
• 발송 예정
• 담론