Lit 4 + Stencil 5 — 프레임워크 없는 Web Components 2026 전략

핵심 요약

다중 팀이 서로 다른 프레임워크를 쓰는 조직에서 Web Components는 더 이상 부차적 선택이 아니다. Lit 4의 signal 기반 반응성과 Stencil 5의 SSR 지원이 안정화되며 프로덕션 레벨에 도달. 사내 디자인 시스템 32 컴포넌트를 Lit 4로 통합, React·Vue·Astro 앱 6개가 같은 코드 사용.

1. 무엇이 새로워졌나

• Lit 4 — Signals 표준 통합, declarative shadow DOM 안정화
• Stencil 5 — Hydrate 모듈 자동, Vite 통합, TS 5.4 데코레이터
• WICG CSS Scoping 표준이 거의 모든 브라우저 GA

2. Lit 4 컴포넌트 예시

import {LitElement, html, css} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('ys-button')
export class YsButton extends LitElement {
  static styles = css\`button { padding: 8px 16px; }\`;
  @property() label = '';
  render() { return html\`<button>\${this.label}</button>\`; }
}

3. React에서 사용

// React 19+ 부터 web component 속성/이벤트 인식 자동
<ys-button label="저장" onclick={handleSave} />

4. SSR — declarative shadow DOM

Lit 4와 Stencil 5 모두 DSD로 서버 렌더 가능. 초기 HTML에 shadow DOM이 포함돼 LCP가 클라이언트 hydration에 의존하지 않는다.

5. 디자인 시스템 운영 — 사내 사례

32 컴포넌트(button, input, dialog 등) Lit 4로 한 번 작성, npm 사내 레지스트리로 배포. 소비 앱 6개(React 5, Vue 1)가 모두 동일 시각·동작. 메이저 디자인 변경 시 한 번만 수정.

6. 함정

• Form integration — ElementInternals API 필수, 옛 브라우저 폴리필 필요
• SSR + hydration mismatch는 여전 — DSD 사용 시 한 번 더 점검
• shadow DOM 안 CSS는 외부 토큰 라이브러리와 격리되므로 CSS 변수 전달 설계 필수

7. Stencil vs Lit

자주 묻는 질문

Q. shadcn/ui와 어떻게 비교? shadcn은 React 한정. 멀티 프레임워크 사이트에서는 Web Components가 유리.