Lit에서 Master CSS 설정하기

Lit 컴포넌트는 일반적으로 섀도 루트 안에 렌더링됩니다. 문서 스타일은 그 안의 요소에 닿지 않으므로 생성된 CSS를 각 컴포넌트의 섀도 트리 내부에 전달해야 합니다.

#설치

1. #Master CSS 추가하기

   Vite로 빌드하는 기존 Lit 프로젝트의 루트에서 설치 프로그램을 실행하세요. Lit은 기본적으로 Vite 정적 모드를 사용합니다. 소스에 완전한 클래스 이름을 유지하고, 브라우저에 처음 등장하는 이름으로 클래스를 생성해야 한다면 런타임 모드를 명시적으로 사용하세요.

   npm create @master/css@2.0.0 -- --framework lit --yes

2. #CSS 소스 진입점 유지하기

   설치 프로그램은 src/index.css를 만들고 Vite 통합을 등록합니다. 정의는 이 소스 파일에 유지하세요:

   src/index.css

   @import '@master/css';

   아래 컴포넌트는 Vite의 ?inline 가져오기로 처리된 CSS 텍스트를 받습니다. 일반적인 문서 수준의 스타일시트 가져오기로는 섀도 루트 내부에 스타일을 적용할 수 없습니다.

   현재 인라인 CSS 전달 방식에는 상대 경로인 Vite base를 사용하세요. 루트 기준 자산 URL은 프로덕션 컴포넌트를 불러올 때 Invalid base URL을 일으킬 수 있습니다. 다음 내용을 기존 Vite 설정에 병합하되 다른 플러그인은 유지하고 Master CSS를 한 번만 등록하세요:

   vite.config.ts

   import { defineConfig } from 'vite'import masterCSS from '@master/css-vite'export default defineConfig({  base: './',  plugins: [masterCSS()]})

3. #섀도 루트에 스타일 포함하기

   생성된 스타일시트를 텍스트로 가져와 Lit의 unsafeCSS로 포함하세요. CSS는 자신의 빌드 입력에서 가져오며, 신뢰할 수 없는 사용자 텍스트를 unsafeCSS에 전달해서는 안 됩니다. 설치 프로그램은 이 스타일시트를 추가할 때 표준 컴포넌트의 기존 스타일을 유지합니다.

   src/my-element.ts

   import { LitElement, html, unsafeCSS } from 'lit'import { customElement } from 'lit/decorators.js'import masterCSSStyles from './index.css?inline'@customElement('my-element')export class MyElement extends LitElement {  static styles = [unsafeCSS(masterCSSStyles)]  render() {    return html`<p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello Lit</p>`  }}

4. #Master CSS 사용 시작하기

   애플리케이션 진입점에서 컴포넌트 모듈을 계속 가져오고, 등록된 요소를 페이지에 배치하세요:

   src/main.ts

   import './my-element'

   <my-element></my-element>

   기존 index.html은 src/main.ts를 모듈로 불러와야 합니다. npm run dev를 실행하면 Lit이 요소의 섀도 루트 안에 문단을 만듭니다.

미리보기는 실제 섀도 루트 안에 문단과 함께 생성된 스타일시트를 불러옵니다.

#섀도 스타일시트 확인하기

Lit 템플릿의 p-md를 p-lg로 바꾸세요. 안쪽 여백이 1rem에서 1.5rem으로 늘어나야 합니다. 원래대로 돌린 뒤 프로덕션 빌드를 확인합니다:

npm run buildnpm run preview

브라우저 개발자 도구에서 <my-element> 안의 문단을 검사하세요. 1rem 안쪽 여백, 떠 있는 표면, 둥근 모서리가 적용되어야 합니다. 문서 수준의 요소에만 스타일이 적용된다면 컴포넌트의 ?inline 가져오기와 static styles를 확인하세요.

정적 모드에는 Master CSS 브라우저 런타임이 필요하지 않습니다. 다만 Lit이 이 클라이언트 렌더링 컴포넌트를 만들려면 여전히 JavaScript가 필요합니다.

npm create @master/css@2.0.0 -- --framework lit --mode runtime --yes

/// <reference types="@master/css/client" />import { LitElement, html } from 'lit'import { customElement } from 'lit/decorators.js'import { withMasterCSSRuntime } from '@master/css-runtime'import program from 'virtual:master-css-program'import emittedGlobals from 'virtual:master-css-emitted-globals'import masterCSSStyles from './index.css?inline'@customElement('my-element')@withMasterCSSRuntime({ program, emittedGlobals })export class MyElement extends LitElement {  protected createRenderRoot() {    const root = super.createRenderRoot()    const styles = document.createElement('style')    styles.textContent = masterCSSStyles    root.append(styles)    return root  }  render() {    return html`<p id="master-check" class="w-fit m(0) p-md b-solid b(1) b-line-divider r-md text-sm font-regular bg-surface-raised fg-text-strong">Hello Lit</p>`  }}

document.querySelector('my-element').shadowRoot  .querySelector('#master-check').classList.add('underline')