CSS 모듈 (네이티브 모듈)

브라우저에서 기본적으로 지원되는 CSS 모듈을 실제로 "CSS 모듈 스크립트"라고합니다. 이는 HTML 및 CSS에서 고유 한 클래스 이름 식별자를 만들어 스코프 스타일을 구현하는 인기 오픈 소스 프로젝트와 다릅니다.

기본 CSS 모듈은 ES 모듈의 일부입니다 (최근에 소개 한 JSON 모듈과 매우 유사) :

 // 일반적인 ES 모듈 가져 오기 "https://cdn.skypack.dev/ [email protected]"에서 반응합니다.

// new JSON 모듈 import configData from './config-data.json'assert {type : 'json'};

// 새로운 CSS 모듈 "./styles.css"assert {type : "css"}에서 스타일 시트 가져옵니다.

내가 이것을 처음 본 것은 저스틴의 트윗에서 나온 것입니다.

현재 이것은 크롬의 특징 일뿐입니다. 관련 링크 :

• 의도 구현 : CSS 모듈 V1
• 크롬 플랫폼 상태 : CSS 모듈 스크립트
• Github/Whatwg : CSS 모듈 스크립트 소개

작성 당시에는 실험적인 웹 플랫폼 기능이 활성화 된 Chrome Canary에서만 작동합니다. "생산 프로젝트에서 언제 사용할 수 있고 이러한 프로젝트의 사용자는 다양한 브라우저를 사용할 수 있습니까?" 몇 년이 걸릴 수 있습니다. 어쩌면 절대. 그러나 여전히 흥미 롭습니다. 아마도 지원은 빠르게 발전 할 것입니다. 아마도 특정 브라우저 기능에 의존 할 수있는 전자 프로젝트 또는 기타 프로젝트에서 작업 할 수 있습니다.

이것은 구성 가능한 스타일 시트로의 확장처럼 보이며 크롬 브라우저로 제한되므로 이와 관련하여 "지연된"브라우저는 거기서부터 시작해야합니다.

여기서 저스틴의 아이디어를 시도했습니다.

CSS 모듈 가져 오기에서 얻은 내용을 기록하면 CSSSTYLESHEET입니다.

실제로 스타일을 사용하고 싶다면 ... 그것은 당신에게 달려 있습니다. Justin의 아이디어는 기본적으로 스타일을 한 줄의 코드로 적용합니다. Lit-HTML이 CSSStylesheet을 지원하는 경우 (이 문서는 명시 적으로 명시하지는 않지만 어느 시점에서 설명 할 것이라고 생각합니다). 기본 웹 구성 요소의 경우 차이가 크지 않습니다. 가져 오기, CSSStylesheet을 가져온 다음 웹 구성 요소에 적용하십시오.

 this.shadowroot.adoptedStylesheets = [MycsSstylesheet];

이 모든 것의 의미는 다음과 같습니다.

• 우리는 JavaScript에서 스타일 시트를 가져 오는 방법이 필요하며, 이것은 기본적으로 내가 아는 첫 번째 명확한 방법입니다.
• 이제 원한다면 CSS에 대한 프로그램 액세스를 운영 할 수 있습니다.
• 웹 구성 요소 사용에 특히 좋지만 보편적입니다. 스타일 시트가 있으면 원하는대로 사용할 수 있습니다.

위 내용은 CSS 모듈 (네이티브 모듈)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!