1. 개요
Web Componenthttps://developer.mozilla.org/ko/docs/Web/API/Web_components
웹 플랫폼에서 재사용 가능한 사용자 정의 UI 컴포넌트를 만들기 위한 표준 기술이다.
shadow-DOM 단위로 캡슐화된 컴포넌트를 정의하고 사용할 수 있으며, 웹 표준이기 때문에 다양한 프레임워크와 무관하게 브라우저 수준에서 직접 지원된다.
2. 구성 요소
- Custom Elements: HTMLElement을 상속받아 새로운 태그를 정의한다.
- Shadow DOM: 컴포넌트 내부에 독립된 DOM 트리를 구성하여 외부 스타일이나 스크립트의 영향을 받지 않는다.
- HTML Templates: <template> 태그를 통해 초기 콘텐츠 구조를 정의하고 JavaScript로 클론하여 삽입해서 쓴다.
3. 사용 예시
#!syntax html
<!-- HTML: 사용자 정의 태그 사용 -->
<my-greeting name="Alice"></my-greeting>
<!-- JavaScript: 컴포넌트 정의 -->
<script>
class MyGreeting extends HTMLElement {
connectedCallback() {
const name = this.getAttribute('name') || 'World';
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `<p>Hello, ${name}!</p>`;
}
}
customElements.define('my-greeting', MyGreeting);
</script>