웹 컴포넌트(2) - 커스텀 엘리먼트

이 글은 Web Components의 핵심 표준 중 하나인 Custom Elements에 대해 다룹니다. Custom Elements를 사용하면 `<div>`와 같은 기본 태그 대신 `<current-time>`과 같이 의미론적으로 적절한 이름의 사용자 정의 태그를 만들 수 있습니다.

이를 통해 HTML Element와 JavaScript Class를 하나로 결합하여 재사용 가능한 UI 컴포넌트를 구현할 수 있습니다. 글에서는 Custom Elements의 기본적인 사용법과 함께 `constructor`, `observedAttributes`, `connectedCallback`, `disconnectedCallback`, `attributeChangedCallback`, `adoptedCallback`과 같은 주요 라이프사이클 콜백 메서드를 설명합니다.

또한, 브라우저 지원 현황과 Polyfill의 필요성에 대해서도 언급하며, IE11 이상 지원 시 Polyfill이 필요할 수 있음을 안내합니다. Custom Elements를 활용하면 복잡한 MutationObserver 코드를 대체하고 더욱 깔끔한 컴포넌트 개발이 가능해집니다.