웹 컴포넌트 2024

이번에 소개해드릴 글은 W3C Web Components Community Group의 멤버, 브라우저 관계자, 라이브러리 제작자, 커뮤니티 구성원들이 모여서 웹 컴포넌트에 대해 나눈 이야기를 잘 정리해 놓은 글입니다.

평소 웹 컴포넌트를 다룰 일이 없고 그래서 잘 알지 못했는데 이번을 계기로 많은 정보를 얻을 수 있었습니다.

세부 목차와 요약을 살펴보면 아래와 같습니다.

1. Declarative Shadow DOM (DSD)

   1. 선언적 Shadow DOM으로 해석할 수 있을 것 같습니다. Shadow DOM은 마크업, 스타일, 동작을 캡슐화 하는 한 방법인데요, DSD는 이걸 서버에서 준비하고 웹 페이지에서 하이드레이션 할 수 있는 방법을 제공합니다.

   2. 그 밖에도 많은 장점을 소개하고 있습니다.

2. CSS Slot Content Detection

   1. 요소의 컨텐트가 변경되었을 때 스타일을 조정할 수 있는 방법을 제공합니다.

   2. 지금도 combinator, pseudo-selector를 사용해 가능한데 이 방법들이 복잡(?)하고 퍼포먼스적으로 좋지 않아 제안했다고 합니다.

3. Scoped Element Registries

   1. 커스텀 DOM을 대규모 프로젝트에서 관리하기 용이하도록 제안된 기능입니다.

   2. 2023년에 Chromium에 프로토타입이 적용됐다고 하네요.

4. ARIA Mixin

   1. ElementInternals를 통해 ARIA Mixin이 모든 최신 브라우저에 제공되었다고 합니다.

   2. 이를 통해 ARIA를 문자열로 한땀한땀 넣는게 아니라 객체의 속성을 통해 관리할 수 있다고 합니다.

5. Cross Shadow Root ARIA

6. Open Stylable

   1. 전역 스타일을 특정 웹 컴포넌트의 Shadow DOM 내부에도 영향을 주도록 하는 방법입니다.

7. Container Style Queries

8. CSS Module Scripts, Imports, and the @sheet Proposal

   1. 이걸 통해 css를 import 할 수 있게 되고

   2. 웹 컴포넌트에 적용되는 스타일을 포함하는 CSS Style Sheet를 한 파일로 번들링 할 때 독립성을 보장할 수 있다고 합니다.

9. HTML Modules and Declarative Custom Elements

생소한 개념도 많고 '우와'하며 보게되는 지점도 많았던 것 같습니다. 매일 관성적으로 보던 코드에서 발전하는 코드를 보니 부지런해져야겠다는 생각이 들었습니다. 그리고 프로젝트의 성격에 따라 한 번쯤 사용해본다면 기술 선택의 폭이 넓어지지 않을까요?

이 글을 읽으며 찾아본 몇몇 문서를 추가로 공유합니다.