웹 컴포넌트

웹 컴포넌트

기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성 및 활용할 수 있는 기술 모음

기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성 및 활용할 수 있는 기술 모음

• 아키텍트

  좋은 아키텍트인 복잡한 것을 간단하게 만들 수 있는 방법

• 기술

  Custon elements : UI 에서 원하는 대로 사용할 수 있는 사용자 정의 요소 및 해당 동작을 정의할 수 있는 JS API 세트

  Shadow DOM : 캡슐화된 “그림자” DOM 트리를 메인 Document DOM 으로부터 독립적으로 렌더링되는 DOM 을 추가하고 연관된 기능을 제어하기 위한 JS API 세트. 엘리먼트의 기능을 프라이잆 하게 유지하고 Document 의 다른 부분과 충돌에 대한 걱정 없이 스크립트와 스타일 정의 가능

  HTML 템플릿 : <\template> 와 <\slot> 엘리먼트로 렌더링된 페이지에 나타나지 않는 마크업 템플릿 작성할 수 있고 여러번 재사용할 수 있게 해줌

• 접근법

  1. Class 문법 사용으로 웹 컴포넌트 기능을 명시하는 클래스 생성

  2. CustomElementRegistry.define() 메서드로 새로운 커스텀 엘리먼트 등록, 정의할 엘리먼트 이름, 기능 명시 클래스, 선택적으로 상속받은 엘리먼트 전달

  3. 필요할 시 Element.attachShadow() 메서드로 shadow DOM 을 커스텀 엘리먼트에 추가(DOM 메서드로 자식 엘리먼트, 이벤트 리스너 등 추가)

  4. 필요한 경우 HTML 템플릿 정의 후 일반적인 DOM 메서드 사용해 템플릿 클론 및 shadow DOM 에 추가