웹 컴포넌트란? HTML Template, Custom Elements, Shadow DOM

웹 컴포넌트(Web Component)란?

웹 컴포넌트는 모든 주요 브라우저에서 지원하는 웹 표준 기반의 재사용 가능한 클라이언트 사이드 컴포넌트다. 코드에서 원하는 부분을 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고, 모든 웹 애플리케이션과 웹 페이지에서 재사용할 수 있다. 웹 컴포넌트를 사용하면 React나 VueJS와 같은 프론트엔드 프레임워크(또는 라이브러리)로부터 완전히 독립적인 개발이 가능해진다.

웹 컴포넌트는 HTML, CSS, JavaScript 들을 컴포넌트화 하기 위해 필요한 4개의 표준이 있다.

1. Custom Elements : 새로운 HTML 요소의 이름과 동작을 정의할 수 있도록 해주는 JavaScript API의 집합.
2. Shadow DOM : 완전히 캡슐화된 sub-DOM 트리를 제공하며 외부 스타일에 영향을 받지 않는다.
3. HTML templates : <template> 과 <slot> 엘리먼트를 사용하여 재사용 가능한 HTML 마크업 템플릿을 작성할 수 있다.
4. HTML Imports : HTML 템플릿이 새로운 템플릿을 만들게 해준다면, HTML imports는 다른 HTML 파일에서 템플릿을 가져오게 해준다

 

웹 컴포넌트의 장점

기존에 프론트엔드 프레임워크로 개발을 해놓았다면, 추후 다른 프레임워크로 마이그레이션할 시 비용과 시간을 크게 투자해야 한다. 하지만 표준 기술을 사용하여 웹 컴포넌트로 개발한다면, 변화에 더 유연하게 대처할 수 있다. React, Vue.js, Angular 등 프론트엔드 프레임워크들은 웹 컴포넌트를 지원하기 때문에, 웹 컴포넌트와 프레임워크를 섞어 사용할 수도 있다.

 

 

웹 컴포넌트의 구성

1. HTML Template

HTML Template은 웹 컴포넌트를 구성하는 4가지 요소 중 하나로, 클라이언트 측 템플릿을 위한 표준 DOM 기반 접근 방식으로 새로운 요소를 정의하기 위해 <template> 요소를 사용할 수 있다.

<template>
    <div class="slide">
        <ul>
            <content select="li"></content>
        </ul>
    </div>
</template>

<template> 태그에 있는 엘리먼트는 DOM의 구조를 갖고 있지만 렌더링 되지 않으며, 이미지와 같은 리소스 파일을 내려받지 않는다. 그리고 <content> 태그의 select 속성에 CSS 선택자를 이용해 엘리먼트를 넣을 수 있다.

 

 

2. Custom Elements

커스텀 엘리먼트는 별도의 이름을 가진 새로운 HTML 태그를 생성하거나 기존에 있는 HTML 태그를 확장할 수 있도록 해준다. 쉐도우 돔과 함께 사용하여 구성된 웹 컴포넌트의 모듈식 코드 사용과 재사용성을 높인다.

<element name="x-slide" extends="ul" constructor="SlideControl">  
    <template>
        <div class="slide">
            <ul>
                <content select="li"></content>
            </ul>
        </div>
    </template>
    <script>
        SlideControl.prototype = {
            currentNum : function(){},
            lastNum : function(){}
        }
        this.lifecycle({
            created: function(root) {}
        });
    </script>
</element>

이렇게 만든 커스텀 엘리먼트를 HTML 파일로 만들고 <link> 태그로 파일에 적용한다.

<link rel="components" href="컴포넌트를 저장한 경로/파일.html">

다음으로, 커스텀 엘리먼트 이름에 is 속성으로 <element> 태그의 name 속성 값을 넣으면 컴포넌트가 적용된다.

<x-slide is="x-slide">  
    <li><img src="http://helloworld.naver.com/img/1.jpeg" alt="1.jpeg" width="500px" height="333px" style=""></li>
    <li><img src="http://helloworld.naver.com/img/2.jpeg" alt="2.jpeg" width="500px" height="333px" style=""></li>
    <li><img src="http://helloworld.naver.com/img/3.jpeg" alt="3.jpeg" width="500px" height="333px" style=""></li>
    <li><img src="http://helloworld.naver.com/img/4.jpeg" alt="4.jpeg" width="500px" height="333px" style=""></li>
</x-slide>

 

3. Shadow DOM

쉐도우 돔에 대한 내용은 간략하게 정리한 적이 있다. https://is-this-it.tistory.com/59

JavaScript - 호이스팅, 이벤트 버블링, 스코프, 프로토타입, Shadow Dom, strict mode

2에서 만든 커스텀 엘리먼트를 쉐도우 돔으로 만들면 아래와 같다 

class CustomEle extends HTMLElement { 
	constructor() { 
    	super(); 
        this.attachShadow({ mode: 'open' }); 
        this.render(); 
    } 
    
    attributeChangedCallback(attrName, oldVal, newVal) { 
    this.render(); 
    } 
    
    static get observedAttributes() { return ['title']; } 
    disconnectedCallback() { alert('bye bye'); } 
    get title() { return this.getAttribute('title'); } 
    render() { 
    	this.shadowRoot.innerHTML = `<slot> <h1>${this.title}</h1> </slot> `; 
    } 
}

 

MDN 문서

https://developer.mozilla.org/ko/docs/Web/Web_Components

웹 컴포넌트 | MDN