Web Component와 함께 컴포넌트 만들기

 

📌 Web Component 란?

web component는 HTML/CSS/JS를 이용하여 재사용가능한 컴포넌트를 만들 수 있는 표준 방식입니다.

나온 지는 꽤 오래된 기술이지만, 직접 써보지 않는 이상 접해볼 기회가 많지 않아서

이번 기회에 사이드 프로젝트에 적용해 볼 겸 관련 스펙을 찾아보고 정리해 봤습니다.

 

📌 web component 톺아보기

웹 컴포넌트는 컴포넌트 재사용과 캡슐화를 위해서 Custom Element , Shadow DOM , HTML template 을 사용합니다.

1️⃣ custom element API

웹 표준은 custom element 라는 JavaScript API를 통해 직접 HTML 엘리먼트를 생성할 수 있습니다.

표준에서는 Autonomous custom 와 Customized built-in 라는 2가지 방식으로 구현이 가능합니다.

 

• Autonomous custom element
  • HTMLElement 를 직접 상속해서 구현합니다.
• Customized built-in element
  • HTML 표준 빌트인 엘리먼트 (div, span, button …) 들을 상속해서 구현합니다.

 

이 두 방식은 정의하는 방법도 다르고, 사용하는 방법도 다릅니다.

다만 아직 Safari 에서는 후자의 방식이 지원되지 않기 때문에 HTMLElement 를 직접 상속받는 Autonomous 형태로 구현하도록 하겠습니다.

class MyElement extends HTMLElement {
    // Fires when an instance of the element is created or updated
    constructor() {
        super();
    }

    // Fires when an instance was inserted into the document
    connectedCallback() {
    }

    // Fires when an instance was removed from the document
    disconnectedCallback() {
    }

    // Fires when an attribute was added, removed, or updated
    attributeChangedCallback(attrName, oldVal, newVal) {
    }

    // Fires when an element is moved to a new document
    adoptedCallback() {
    }
}

custom element 는 위와 같이 별도의 라이프사이클 메서드를 제공해 줍니다.

 

출처:  https://javascript.works-hub.com/learn/web-components-api-lifecycle-events-and-custom-events-66668

 

• constructor

웹 컴포넌트가 초기화되면 가장 먼저 constructor 가 실행됩니다.

여기서는 주로 shadowRoot 할당 작업을 수행합니다.

• connectedCallback

웹 컴포넌트가 DOM에 추가된 이후에 호출됩니다.

DOM 관련 연산이 필요한 경우 해당 라이프사이클에 정의합니다.

• adoptedCallback

웹 컴포넌트가 새로운 Document로 이동되었을 때 호출됩니다.

• attributeChangedCallback

웹 컴포넌트의 static 속성인 observedAttributes 에 정의된 속성값이 추가, 변경, 삭제되었을 때 호출됩니다.

이를 통해서 observable 한 속성을 구현할 수 있습니다.

 

2️⃣ template & slot

template 과 slot 은 보다 유연한 마크업 구조를 위해 사용할 수 있는 표준 기술입니다.

template 은 일종의 Fragment 로서 많은 양의 JS 코드 없이 원하는 형태의 템플릿 구조를 구현할 수 있습니다.

JS 를 통해 clone 되어 DOM 트리에 삽입될 수 있으며 내부에 style 및 script 요소를 포함할 수 있습니다.

독립적인 기술이지만, 웹 컴포넌트와 함께 사용될 때 시너지를 발휘합니다.

 

<template>
    <style>
    :host {
      display: block;
      width: fit-content;
      padding: 15px 20px;
    }
  </style>
  <div></div>
</template>

 

사실 ES6 Template literals 이 스펙에 추가되면서 의미가 퇴색된 스펙으로 보이지만,

웹 컴포넌트를 구성하는 기술로서는 한 번쯤 살펴볼만한 가치가 있다고 생각합니다.

slot 은 웹 컴포넌트 내부에 사용자가 자신만의 마크업을 채워 넣을 수 있도록 해줍니다.

만약 다음과 같이 description 을 slot 으로 지정한다면,

 

<p>
    <slot name="description">default description</slot>
</p>

 

컴포넌트 내부에 렌더링 하고자 하는 내용을 다음과 같이 채울 수 있습니다.

만약 description 슬롯을 지정하지 않거나 브라우저에서 slot 을 지원하지 않는다면

위에서 선언한 default description 이라는 텍스트가 노출됩니다.

 

<my-webcomponent>
    <span slot="description">Hello world!</span>
</my-webcomponent>

 

3️⃣ shadow DOM

 

shadow DOM 은 외부 DOM 구조로부터 캡슐화를 제공해 줍니다.

기존의 DOM API는 외부 마크업구조, 스타일 등의 영향을 받지만 shadow DOM 을 통해서

가려진 DOM 트리 를 생성한 뒤 외부 DOM 트리와 분리된 환경을 유지한 채로 연결됩니다.

 

element.attachShadow({ mode: 'open' });

 

mode 는 캡슐화 모드를 설정하는 open 과 closed 옵션을 제공합니다.

closed 로 설정하면 shadowRoot에 아얘 접근이 불가능하고,

open 으로 설정 시 JavaScript 로 shadowRoot에 접근 가능합니다.

 

이러한 캡슐화는 언제 효과적으로 활용될까요? 바로 컴포넌트 스타일링입니다.

Shadow DOM 을 활용하면 외부 DOM에 영향을 주지 않는 고유한 스타일을 가지는 완전히 독립된 sandbox를 구성할 수 있습니다.

 

<style>
  body { color: white; } 
  .test { background-color: red; }
</style>

<styled-element>
  #shadow-root
    <style>
      div { background-color: blue; }
    </style>
    <div class="test">Test</div>
</styled-element>

 

위는 예시코드입니다. div 는 어떤 색일까요?

shadow tree 외부의 css 선택자는 shadow tree 내부의 선택자와 일치되지 않습니다.

하지만 이외에 상속 가능한 스타일은 host에서 shadow tree 내부로 상속됩니다.

위 예시에서 test 선택자는 shadow tree 내부의 test 와는 일치되지 않습니다.

다만 body 태그에 할당된 컬러 스타일은 상속되지요.

 

📌 간단한 web component를 만들어보자

1️⃣ custom element 첫 삽 뜨기

간단한 웹 컴포넌트를 직접 만들어보겠습니다.

사진과 상세 설명을 묶어서 보여주는 컴포넌트입니다.

먼저 HTMLElement 를 확장한 ImageFigure 컴포넌트를 정의합니다.

 

class ImageFigure extends HTMLElement {
    constructor() {
        super();
    }

        get src() {
            return this.getAttribute("src") || null;
        }

        get caption() {
            return this.getAttribute("caption") || "";
        }

        get alt() {
            return this.getAttribute("alt") || null;
        }

    connectedCallback() {
        this.render();
    }

    render() {
        this.innerHTML = this.template({
            src: this.src,
            alt: this.alt,
            caption: this.caption,
        });
    }

    template(state) {
        return `
           <figure>
              <img src="${state.src}" alt="${state.alt || state.caption}" />
              <figcaption>${state.caption}</figcaption>
           </figure>
        `;
    }
}

 

2️⃣ custom element 등록

그리고 하단에 우리가 구현한 custom element 를 등록해 주는 코드를 추가합니다.

CustomElementRegistry 인터페이스에서 제공해 주는 define 함수를 이용하면 됩니다.

주의할 점은 웹 컴포넌트는 - 로 구분되는 2 단어 이상으로 명명되어야 한다는 것입니다.

HTML parser가 이 형식으로 일반적인 HTML 태그와 구분하기 때문입니다.

 

// ... ImageFigure 클래스 코드

window.customElements.define('image-figure', ImageFigure);

 

이제 이 컴포넌트를 불러와서 사용해 볼까요?

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my-web-component</title>

    <!-- ✅ Imports custom element -->
    <script type="module" src="my-element.js"></script>
</head>
<body>

    <!-- ✅ Use custom-element -->
    <image-figure 
        style="max-width: 100px"    
        src="https://picsum.photos/id/237/200/300" 
        alt="Free Static Hosting"
        caption="새로운 이미지">
    </image-figure>

</body>
</html>

 

 

3️⃣ 라이프사이클 추가하기

만약 특정 속성의 변화를 감지하여 그에 따른 effect 를 수행하고 싶다면 어떻게 할 수 있을까요?

이를 위해서는 attributeChangedCallback 라는 라이프사이클 메서드를 활용하면 됩니다.

해당 라이프사이클은 observedAttributes 에서 반환하는 속성의 변경을 감지합니다.

이제 위 코드에서 src 속성을 반응형으로 만들어보겠습니다.

 

class ImageFigure extends HTMLElement {
        // ✅ observe 할 속성을 정의해주고
    static get observedAttributes() {
        return ['src']
    }

        // ✅ 해당 속성이 변할 경우에 대응하는 콜백을 정의함
    attributeChangedCallback(attr, oldValue, newValue) {
        if (oldValue === newValue) {
            return
        }

                if (attr === "src") {
              const $image = this.querySelector("img");
              if ($image) {
                $image.src = newValue;
              }
            }
    }

        // ... other code
}

window.customElements.define("image-figure", ImageFigure);

 

이제 테스트를 위해 타이머를 설정해서 이미지 소스 배열을 순회해 보겠습니다.

 

 

<body>
    <image-figure
        id="image-figure-example"
        style="max-width: 100px"    
        src="https://picsum.photos/id/237/200/300" 
        alt="Free Static Hosting"
        caption="새로운 이미지">
    </image-figure>

    <script>
        const imageFigure = document.querySelector('#image-figure-example')

        const imageSources = [
            'https://picsum.photos/id/237/200/300',
            'https://picsum.photos/id/238/200/300',
            'https://picsum.photos/id/239/200/300',
            'https://picsum.photos/id/240/200/300'
        ]

        let idx = 0

        setInterval(() => {
            imageFigure.setAttribute('src', imageSources[idx])
            idx = (idx + 1) % imageSources.length
        }, 2000)
    </script>
</body>

 

5️⃣ shadow DOM을 활용한 스타일 캡슐화

Vue를 경험해 보셨다면 컴포넌트 스타일링시에 다음과 같은 코드를 사용해 보신 경험이 있을 것입니다.

 

<style scoped>
</style>

 

여기서 scoped 속성은 스타일 캡슐화를 위해 Vue 템플릿 문법에서 지원하고 있는 기능인데요,

shadow DOM 을 활용하면 전역 환경에 영향을 주지 않는 스타일 캡슐화라는 동일한 목적을 구현할 수 있습니다.

 

이제 ImageFigure 에 shadow DOM을 적용해 보겠습니다.

 

class ImageFigure extends HTMLElement {
    #shadow;
    // ...  

    constructor() {
    super();
    this.#shadow = this.attachShadow({ mode: "open" }); // ✅ attach shadow root
  }

    connectedCallback() {
      this.render();
  }

    attributeChangedCallback(attr, oldValue, newValue) {
    if (oldValue === newValue) {
      return;
    }

    if (attr === "src") {
            // ✅ query element from shadow root
      const $image = this.#shadow.querySelector("img");
      if ($image) {
        $image.src = newValue;
      }
    }
  }

    render() {
                // ✅ set innerHTML below shadowRoot
        this.#shadow.innerHTML = this.template({
            src: this.src,
            alt: this.alt,
            caption: this.caption,
        });
    }

    template(state) {
        return `
            <style> 
            :host {
                display: inline-block; 
                margin: 5px; 
                padding: 5px;
                border: 1px solid #ccc; 
                border-radius: 5px; 
            }
            figure { margin: 0; }
            figure img {
                max-width: 100%; 
                border: 1px solid #aaa; 
                border-radius: 5px; 
                box-sizing: border-box; 
            } 
            </style>
            <figure>
                <img src="${state.src}" alt="${state.alt || state.caption}" />
                <figcaption>${state.caption}</figcaption>
            </figure>
        `;
    }
}

 

여기서 :host 는 shadow root host에 대한 pseudo class selector입니다.

 

개발자도구로 지정한 스타일이 잘 적용되었는지 확인해보자

 

6️⃣ slot으로 확장하기

현재는 caption 을 문자열로 받고 있는데, 이를 원하는 HTML 엘리먼트로 채워 넣을 수 있도록 확장할 수 있습니다.

 

class ImageFigure extends HTMLElement {
    // ... other code

    template(state) {
        return `
            // ...

         <figure>
        <img src="${state.src}" alt="${state.alt || state.caption}" />
        <figcaption>
          <slot name="catpion"></slot>
        </figcaption>
     </figure>
        `
    }
}

 

사용하는 쪽에서는 원하는 엘리먼트를 명명된 slot과 함께 전달합니다.

 

<image-figure
  id="image-figure-example"
  style="max-width: 100px;"
  src="https://picsum.photos/id/237/200/300"
  alt="Free Static Hosting"
>
  <span slot="catpion">image caption</span>
</image-figure>

 

7️⃣ custom event

웹 컴포넌트로 새로운 컴포넌트를 만들면 특정 이벤트를 생성해서 전달해주고 싶은 경우가 있습니다.

이 경우에는 기본 Event 객체를 확장한 새로운 Native 이벤트 객체를 생성할 수 있는 CustomEvent 생성자를 사용하면 됩니다.

 

new CustomEvent(type, options)

 

이렇게 생성된 이벤트는 dispatchEvent 를 통해 상위 노드로 전파할 수 있습니다.

이번 ImageFigure 예제에서는 src 가 바뀔때 change:src 이벤트를 발생시키도록 하겠습니다.

 

attributeChangedCallback(attr, oldValue, newValue) {
    // ...

    if (attr === "src") {
    const $image = this.#shadow.querySelector("img");
    if ($image) {
      $image.src = newValue;
      this.dispatchEvent(
        new CustomEvent("change:src", { bubbles: true, composed: true })
      );
    }
  }
}

 

이벤트를 받으면 로그를 찍어서 확인해 보겠습니다.

 

 

<script>
    const imageFigure = document.querySelector("#image-figure-example");

    imageFigure.addEventListener("change:src", () => {
      console.log("change");
    });

    // ... 
</script>

 

📌 최종 코드

위에서 살펴본 ImageFigure 의 최종 코드는 다음 sandbox를 참고하시면 됩니다.

wc-image-figure - CodeSandbox

wc-image-figure - CodeSandbox

 

📌 Web Component로 Todo 앱 만들기

웹 컴포넌트를 직접 활용해 보기 위해서 간단한 Todo App을 만들어봤습니다.

PoC를 위해 러프하게 구현하느라 코드는 좀 지저분합니다. 🙏

참고용으로만 봐주시면 좋을 것 같아요!

Todo App (with Web Component)

Todo App (with Web Component) - CodeSandbox

 

📌 web component 라이브러리

PoC 앱으로 확인해 보니 웹 컴포넌트 API 만을 이용하기에는 불편한 점들이 있었는데요,

마침 이러한 문제점들을 개선한 여러 래퍼 패키지들이 존재합니다.

만약 웹 컴포넌트로 앱을 개발하기로 결정했다면, 생산성을 위해 아래 패키지를 사용하는 것이 좋을 것 같다는 의견입니다. 😄

@polymer/polymer vs @stencil/core vs hybrids vs lit-element vs slim-js | npm trends

@polymer/polymer vs @stencil/core vs hybrids vs lit-element vs slim-js | npm trends

 

📌 참고자료

webcomponents.org - Discuss & share web components

Web Components(2): Custom Elements : NHN Cloud Meetup

Custom Elements v1 - Reusable Web Components

The Complete Guide to Web Components

Web Components API: Lifecycle Events and Custom Events

Lifecycle Hooks in Web Components - Ultimate Courses

Shadow DOM은 무엇일까? | WIT블로그