Custom Element

Custom Element

Custom Element는 웹 컴포넌트의 4가지 표준 중 하나입니다.

Web Component

Web Component는 JavaScript, CSS, HTML들을 컴포넌트화하기 위해 필요한 4개의 표준을 묶어서 부르는 이름입니다.

사용하는 이유

• 일반적인 마크업 구조에선 컴포넌트를 재사용하기 어렵습니다. 이런 단점을 보완하고자 Custom Element를 사용하여 HTML Element와 JavaScript Class를 하나로 만들어 컴포넌트를 캡슐화하여 쉽게 적용할 수 있게 했습니다.

• 태그의 이름을 사용자가 원하는대로 만들 수 있어 의미 없는 div 태그 남용을 줄일 수 있습니다. 이로 인해 해당 태그가 어떤 의미를 가지고 있는지 명확하게 알 수 있습니다.

• 특정 지점에서 실행되는 생성자 내부에서 생명주기 콜백을 정의할 수 있습니다.

  • connectedCallback: 커스텀 엘리먼트가 document의 DOM에 연결될 때 마다 호출된다.
  • attributeChangedCallback: 커스텀 엘리먼트의 애트리뷰트가 추가, 생성, 삭제가 될 때 호출이 된다.
  • disconnectedCallback: 커스텀 엘리먼트가 document의 DOM에 연결이 끊어졌을때 호출된다.
  • adoptedCallback: 커스텀 엘리먼트가 새로운 document로 이동될 때 호출된다.

왜 커스텀 엘리먼트는 -를 이용해서 태그 이름을 정해야할까?

• HTML파서가 JS에서 선언된 Custom Elements를 모르는 상황에서도 Custom Elements가 될지도 모르는 태그들을 구분하기 위해서이다.
• HTML 표준에 정의되어 있지 않으면서 Custom Elements로 정의되지 않는 태그들은 HTMLUnknownElement 인터페이스가 할당된다.
• 하지만 Custom Elements들은 HTMLElement로부터 직접 상속되어야하기 때문에 HTMLUnknownElement 상속을 막기 위해서이다.

connectedCallback & disconnectedCallback

Custom Element가 DOM에 추가되거나 삭제될 때 실행된다. 이때마다 인스턴스 객체가 추가, 삭제되는것은 아니기때문에 여러번 사용해도된다. 한번 생성된 객체는 자동으로 파괴되지 않기 때문에 인스턴스 객체를 정리하는 작업을 해줄필요가 있다.

attributeChangedCallback & observedAttributes

observedAttributes : 모니터링 하고싶은 속성들의 이름을 나열 해야한다.

static get observedAttributes(){
	return ['type'];
}