How Declarative Custom Elements (DCE) Could Improve Web Components

Context

현재 Web Components는 순수 프레젠테이션 컴포넌트도 JavaScript 부트스트래핑이 필수이며, Declarative Shadow DOM(DSD)은 50개 버튼 페이지에서 동일한 스타일/마크업을 50회 반복해야 하는 확장성 문제가 있다. 또한 SSR 구현이 프레임워크마다 다르고, FOUC 발생으로 인한 사용자 경험 저하가 발생한다.

Technical Solution

• JavaScript 제거: DCE 정의(definition name="my-element")를 1회만 작성한 후 문서 전체에서 재사용 가능하도록 변경
• 템플릿 재사용화: Declarative Shadow DOM의 template shadowrootmode 기반으로 정의 단계에서 스타일과 마크업을 한 번만 선언
• 런타임 처리 제거: 라이브러리별 의존성 및 특정 구성 요구사항 제거
• 초기 렌더링 최적화: 초기 페이지 로드 시 JavaScript 파싱/실행 없이 마크업만으로 렌더링
• SSR 표준화 경로: 프레임워크별 맞춤 구현 대신 선언형 마크업 기반으로 표준화

Key Takeaway

DCE는 Declarative Shadow DOM의 템플릿 중복 문제를 해결하면서 순수 JavaScript 없는 컴포넌트 정의를 가능하게 함으로써, 웹 플랫폼 컴포넌트 모델의 진화 과정에서 JavaScript 의존성을 제거하고 선언형 마크업 기반의 확장 가능한 설계 원칙을 제시한다.