Web Components
Web Components는 HTML과 DOM, JavaScript, CSS를 이용하여 재사용 가능한 사용자 인터페이스 구성 요소를 구현하는 웹 플랫폼 기술의 집합이다. 프레임워크에 전적으로 종속되지 않는 사용자 정의 요소를 만들고 이를 일반적인 HTML 문서에 삽입할 수 있다. 사용자...
| 분류 | 웹 구성 요소 기술 집합 |
|---|---|
| 주요 용도 | 재사용 가능한 사용자 인터페이스 요소 구현 |
| 관련 기술 | World Wide Web, HTML, URL, 웹 브라우저 |
| 참고 자료 | MDN: Web Components |
Web Components는 HTML과 DOM, JavaScript, CSS를 이용하여 재사용 가능한 사용자 인터페이스 구성 요소를 구현하는 웹 플랫폼 기술의 집합이다. 프레임워크에 전적으로 종속되지 않는 사용자 정의 요소를 만들고 이를 일반적인 HTML 문서에 삽입할 수 있다. 사용자 정의 요소, Shadow DOM 및 HTML 템플릿은 독립적으로 사용할 수 있으면서도 함께 결합될 때 캡슐화된 컴포넌트 구조를 제공한다.
Custom Elements API를 사용하면 개발자가 정의한 이름의 HTML 요소와 그 동작을 브라우저에 등록할 수 있다. customElements.define()은 요소 이름과 생성자를 연결하고, 요소가 문서에 추가되거나 제거될 때 수명 주기 콜백을 실행할 수 있다. 표준 요소를 확장하는 방식과 독립적인 커스텀 요소를 만드는 방식은 지원과 동작 면에서 차이가 있다.
Shadow DOM은 요소 아래에 독립된 하위 트리를 연결하여 내부 구조와 스타일의 범위를 구분하는 메커니즘이다. 외부 문서의 CSS 규칙이 내부에 무조건 침투하지 않도록 하는 스타일 경계와 슬롯을 통한 콘텐츠 배치를 지원한다. 그러나 Shadow DOM이 모든 자바스크립트 접근이나 보안 공격을 차단하는 샌드박스는 아니다.
template 요소는 초기 렌더링 시 표시하지 않는 마크업을 보관하고 프로그램에서 복제하여 사용할 수 있게 한다. slot 요소는 컴포넌트를 사용하는 문서가 전달한 콘텐츠를 내부 레이아웃의 지정된 위치에 배치한다. 컴포넌트 구현에서는 속성과 프로퍼티, 이벤트의 인터페이스를 명확히 설계하여 소비자가 안정적으로 재사용할 수 있도록 한다.
Web Components는 디자인 시스템과 위젯, 여러 프레임워크가 공존하는 웹사이트에서 활용된다. 상태 관리나 서버 통신, 애플리케이션 전체 라우팅은 이 기술만으로 자동 제공되지는 않으므로 필요에 따라 다른 라이브러리와 결합한다. 접근 가능한 의미론적 구조와 키보드 상호작용, 스타일 사용자 정의 경계를 설계하는 것이 구성 요소의 품질을 결정한다.[1]