Cutsom Elements란?

웹 컴포넌트 기술의 핵심 요소 중 하나로, 기존 HTML 태그 외에 개발자가 직접 자신만의 HTML 태그를 정의하고 사용할 수 있도록 합니다. 이를 통해 재사용 가능한 UI 컴포넌트를 만들 수 있습니다.

특징

1. 사용자 정의 태그 생성
<my-element> 같은 HTML에서 정의되지 않은 태그를 사용할 수 있습니다.

2. 객체 지향적인 구성
Custom Elements는 JavaScript 클래스를 기반으로 작성됩니다.

3.완전한 캡슐화 가능
Shadow DOM과 결합하면 CSS와 DOM 구조를 외부로부터 독립적으로 관리할 수 있습니다.

4.재사용 가능
다양한 페이지나 프로젝트에서 정의한 커스텀 태그를 재활용할 수 있습니다.

Custom Elements의 구성 요소

1. Autonomous Custom Elements
HTML의 기본 태그와 관계없이 독립적으로 동작하는 엘리먼트입니다.

<my-element></my-element>

2. Customized Built-in Elements
기존 HTML 태그를 확장하여 동작을 추가합니다.

<button is="my-button"></button>

Custom Elements의 핵심 메서드와 라이프사이클

라이프사이클 콜백(Lifecycle Callbacks)

• Custom Elements는 DOM에 추가/삭제되거나 속성이 변경될 때 특정 메서드가 호출됩니다.

메서드	설명
connectedCallback	엘리먼트가 DOM에 추가될 때 호출됩니다.
disconnectedCallback	엘리먼트가 DOM에서 제거될 때 호출됩니다.
attributeChangedCallback	엘리먼트의 속성이 변경될 때 호출됩니다.
adoptedCallback	엘리먼트가 다른 Document로 이동될 때 호출됩니다.

class MyElement extends HTMLElement {
    connectedCallback() {
        console.log('Element added to DOM!');
    }
    disconnectedCallback() {
        console.log('Element removed from DOM!');
    }
}

attributeChangedCallback을 사용하면 속성 변경을 감지할 수 있습니다.

class MyElement extends HTMLElement {
    static get observedAttributes() {
        return ['data-value']; // 감시할 속성 이름
    }
    attributeChangedCallback(name, oldValue, newValue) {
        console.log(`${name} changed from ${oldValue} to ${newValue}`);
    }
}