Web Components 이란
재사용 가능한 UI 컴포넌트 표준
Web Components는 캡슐화된 기능을 가진 재사용 가능한 커스텀 HTML 요소를 만들기 위한 웹 표준 세트입니다.
핵심 기술
- Custom Elements — 커스텀 HTML 태그 생성
- Shadow DOM — 스타일과 마크업 캡슐화
- HTML Templates — 재사용 가능한 템플릿
- ES Modules — 모듈러 컴포넌트 로딩
장점
- 프레임워크 없이 작동
- 모든 브라우저와 호환
- 스타일 캡슐화
- 프로젝트 간 재사용 가능
예시
class MyButton extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
}
customElements.define('my-button', MyButton);
라이브러리
- Lit (Google)
- Stencil (Ionic)
- FAST (Microsoft)