웹 컴포넌트

웹 컴포넌트란?

웹 컴포넌트란 컴포넌트의 기능을 다른 코드로부터 캡슐화하여 재사용 가능한 custom element를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.

사용하는 이유

• 관심사별로 컴포넌트를 관리하고 싶을 때
• Shadow DOM을 통한 캡슐화(스타일 충돌 해제)
  

• HTML과 CSS의 스코프를 독립으로 다룰 수 있게 지원하는 개념 및 기능으로 private 하게 유지할 수 있어, 도큐먼트의 다른 부분과의 충돌에 대한 걱정 없이 스크립트와 스타일을 작성할 수 있음
• 서비스를 만들게 되면 HTML, CSS, JS 모두 하나의 글로벌 스코프라는 진입점이 존재. 즉, 모든 부분을 open 하는 Public 한 점이 FE 개발에 있어서 단점이 될 수 있음. (document.querySelector()로 모든 DOM tree에 접근가능)
• Shadow DOM이 등장하기 전에는 <iframe>을 통해서 스코프를 독립적으로 관리할 수 있었지만, 최선은 아니였음.
  • 의미 없는 http 요청이 발생할 수 있음.
  • 별도의 페이지를 만들기 때문에 performance 관점에서 매우 비효율적.
  • iframe와 서비스의 도메인 주소가 같지 않으면 접근이 불가능.
• Vendor lock-in을 피하고 싶을때
  • Vendor lock-in이란 특정 기술에 크게 의존하여, 다른 시스템으로 갈아타기 어려운 상황
• 커스텀 엘리먼트 사용가능
  • <div> 대신 <current-time>처럼 적절한 이름의 태그를 사용할 수 있다

사용 방법

• Custom elements

class MyComponent extends HTMLElement {...}

// html의 <my-component>태그에 MyComponent 클래스를 정의
customElements.define("my-component", MyComponent);

class MyComponent extends HTMLElement {
  // element 생성시
  constructor() {
    super();
    ...
  }

  // element가 document에 추가될 때 브라우저가 이 메서드를 호출합니다.
  // element가 추가/제거될 때마다 반복적으로 호출합니다.
  connectedCallback() {
    ...
  }

  // element가 document에서 제거될 때 브라우저가 이 메서드를 호출합니다.
  // 마찬가지로 element가 추가/제거될 때마다 반복적으로 호출합니다.
  disconnectedCallback() {
    ...
  }

  // 변경을 감지할 attribute들을 모니터링하기 위한 메서드입니다.
  static get observedAttributes() {
    return [...];
  }

  // 위에서 모니터링중인 attribute가 변경되었을 때, 호출됩니다.
  attributeChangedCallback(name, oldValue, newValue) {
    ...
  }

  // element가 새로운 document로 움직였을때 호출합니다.
  adoptedCallback() {
    ...
  }

  // 그외의 다른 Property나 메서드 존재..
}

• Shadow DOM

class MyComponent extends HTMLElement {
  // element가 문서에 추가되었을 때, 브라우저가 이 메서드를 호출함
  connectedCallback() {
    // mode속성은 캡슐화 레벨을 설정하며, open은 코드로 접근할 수 있고, closed는 항상 elem.shadowRoot의 값이 null이다.
    this.attachShadow({ mode: 'open' });
  }
}

참고
웹 컴포넌트 - Web API | MDN

웹 컴포넌트는 왜 등장했을까? | 요즘IT

Web Components - Keep calm and UseThePlatform

웹 컴포넌트(3) - 쉐도우 돔(#Shadow DOM)

웹 컴포넌트