Web Components

원본 (MDN) 예제 코드

Using Custom Elements

High-level View

Web Components를 생성하기 위해서는 CustomElementRegistry interface를 구현한 window.customElements 의 define() 메서드를 이용하면 된다.

이 메서드는 다음 세 개의 arguments를 받아 custom element를 registry하게 되는데, 각각 다음과 같다.

DOMString : custom element의 이름 (kebab-case)

class extends HTMLElement : element의 행동을 정의한 class

{ extends } : inherits할 Node name (optional)

가령 다음과 같이 사용이 가능하다.


class WordCount extends HTMLParagraphElement {
	constructor() {
		super(); // always call

		// element functionality
	}
}

customElements.define('word-count', WordCount, { extends: 'p' });

뿐만 아니라 connectedCallback, attributeChangedCallback 등 lifecycle callbacks도 존재하며, 이는 아래에서 다루도록 하겠다.

암튼 위와 같이 registration 했으면 다음과 같이 사용이 가능하다.


<word-count></word-count>

<!-- or -->

<p is="word-count"></p>

물론 js로도 programmatic하게 사용할 수도 있다.


document.createElement('word-count');

// or

document.createElement('p', { is: 'word-count' });

무엇을 사용하든 자유.

Working through some simple examples

간단한 예제를 보며 좀 더 이해해보도록 하자.

Autonomous custom elements

다음의 spec을 가진 element를 하나 registration 해 보도록 하겠다.

image icon과 text string으로 구성됨

text string은 hide, icon은 display

icon focused 시 text가 popup으로 나옴

일단 이를 위해서는 다음과 같은 class를 하나 정의해준다. 이 때 HTMLElement 를 extends하는것을 유의.


class PopupInfo extends HTMLElement {
	constructor() {
		super(); // always

		// functionality
	}
}

super() 는 항상 constructor() 첫 번째에 위치해야 함은 잊지 말자.

super() 아래에는 어떤 행동을 할 것인지 명시할 수 있으며, 여기에는 다음의 코드를 작성하도록 하겠다.


class PopupInfo extends HTMLElement {
  constructor() {
    super();

    // create a shadow root
    this.attachShadow({ mode: 'open' });

    // create nested elements
    const wrapper = document.createElement('span');
    wrapper.classList.add('wrapper');

    const icon = wrapper.appendChild(document.createElement('span'));
    icon.classList.add('icon');
    icon.setAttribute('tabindex', 0);

    const img = icon.appendChild(document.createElement('img'));
    img.src = this.hasAttribute('img') ? this.getAttribute('img') : '/img/default.png';

    const info = wrapper.appendChild(document.createElement('span'));
    info.classList.add('info');
    info.textContent = this.getAttribute('data-text');

    const style = document.createElement('style');
    style.textContent = /* css strings */;

    // attach ccreated elements to the Shadow DOM
    this.shadowRoot.append(style, wrapper);
  }
}

customElements.define('popup-info', PopupInfo);

Shadow Root는 무엇인가요? 걱정하지 말자. 지금은 알 필요 없고 이 내용도 아래에서 다룬다. 지금은 그냥 또 하나의 independent한 DOM을 생성한다고 받아들이면 된다.

아무튼 이렇게 registration을 해 주면 앞서 말했듯이 다음과 같이 사용이 가능하다.


<popup-info
  img="/img/alt.png"
  data-text="text contents"></popup-info>

전체 코드

위에서 this.hasAttribute() 그리고 this.getAttribute() 를 통해 DOM attribute를 참조한게 보이는가? 이들이 바로 custom element에 정의된 attribute를 가리키는 것이다.

Internal vs External styles

style은 위와 같이 직접 css string을 집어넣어도 되나, 다음과 같이 <link> 태그를 이용할 수도 있을 것이다.


const linkElement = document.createElement('link');
linkElement.setAttribute('rel', 'stylesheet');
linkElement.setAttribute('href', 'style.css');

// attach to the Shadow DOM
this.shadowRoot.appendChild(linkElement);

이 편이 좀 더 쉽기는 한데, 뭐 이것도 아래에서 더 쉬운 방법을 볼 것이다.

Customized built-in elements

다른 예를 하나 더 보자. expending-list 라는 이름을 가질 custom element이다.


class ExpandingList extends HTMLUListElement {
  constructor() {
    super();

    // nothing
  }
}

customElements.define('expanding-list', ExpandingList, { extends: 'ul' });

이번에는 어떻게 구성될지 정의하지 않고 그냥 registration을 했다. 다만 ul node를 extends 했을 뿐이고. 그럼 결과는 어떨까?


<ul is="expanding-list">
  <!-- ... -->
</ul>

전체 코드

결과는 일반적인 <ul> 을 사용할 때와 동일하다. 물론 is attribute를 사용하지 않고 바로 <expanding-list> 를 사용해도 된다.

Using the Lifecycle callbacks

앞서 말했듯이 각 lifecycle마다 호출 가능한 callback이 존재한다.

connectedCallback : custom element가 DOM에 connected될 때 호출

모든 DOM이 parsing되기 전에도 호출될 수 있음
node moved 시에도 호출됨
disconnected 시에도 호출될 수 있으며, 이는 isConnected property를 이용해 판별이 가능

disconnectedCallback : custom element가 DOM에서 disconn 될 때 호출

adoptedCallback : node가 moved 되었을 때 호출

attributeChangedCallback : custom element의 attributes가 added, removed, changed 될 때 호출

단, static get observedAttributes() 메서드로 observe할 attributes를 알려줘야 함

실제 예를 보며 이해해보도록 하자.


<custom-square l="100" c="red"></custom-square>


class CustomSquare extends HTMLElement {
  constructor() {
    super();

    this.shadow = this.attachShadow({ mode: 'open' });

    const div = document.createElement('div');
    const style = document.createElement('style');

    this.shadow.appendChild(style);
    this.shadow.appendChild(div);
  }

  updateStyle() {
    this.querySelector('style').textContent = /* css string */;
  }

  /**
   * lifecycle 'connected'
   * */
  connectedCallback() {
    console.log('Custom square element added to page');
    this.updateStyle();
  }

  /**
   * lifecycle 'disconnected'
   * */
  disconnectedCallback() {
    console.log('Custom square element removed from page');
  }

  /**
   * lifecycle 'adopted'
   * */
  adoptedCallback() {
    console.log('Custom square element moved to new page');
  }

  /**
   * lifecycle 'attribute changed'
   * */
  attributeChangedCallback(name, oldValue, newValue) {
    console.log('Custom square element attributes changed');
    updateStyle();
  }

  static get observedAttributes() {
    // should return an array containing names of attributes
    return ['c', 'l']; // watch 'c' and 'l' attributes
  }
}

전체 코드

대충 느낌이 오지 않는가?

참고로, 언급했듯이 attributeChangedCallback() 은 observedAttributes() 로 어떤 attribute를 watching 할 것인지 지정해줘야만 한다. 반드시.

Using Shadow DOM

웹 컴포넌트에서 가장 중요한 개념은 encapsulation 이다.

복잡하게 구현된 Component 내부를 어떻게 해야 잘 유지할 수 있을 것이며, 또 다른 Component와는 어떻게 충돌을 피할 수 있을까? 어떻게 Scope를 관리해야만 할까? 어떻게 해야 깔끔하고 간결한 코드를 유지할 수 있을까?

Shadow DOM API는 이러한 것에 초점을 맞추었으며, 여기서는 이를 바탕으로 어떻게 해야 각각의 DOM을 서로 충돌 없이 분리가 가능한지 그 방법을 보도록 하겠다.

(물론 앞서 DOM에 대해 알고있어야만 함)

High-level view

다음과 같은 HTML 코드가 있다고 할 때


<!DOCTYPE html>

<html>
  <head>
    <meta charste="utf-8">
    <title>Simple DOM</title>
  </head>

  <body>
    <section>
      <img src="dinosaur.png" alt="T-Rex">
      <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla</a></p>
    </section>
  </body>
</html>

이를 DOM에서는 다음과 같은 tree 형태로 나타낸다.

Shadow DOM 역시 이와 크게 다를 것이 없으며, 다음 그림을 통해 이해해보자.

그림에 나오는 네 가지 단어의 의미는 다음과 같다.

Shadow host : 일반적인 DOM Node처럼 보이는, Shadow DOM 연결 지점

Shadow tree : Shadow DOM 내부의 DOM Tree

Shadow boundary : Shadow DOM의 시작 node부터 Shadow DOM의 끝 node까지의 공간

Shadow root : Shadow tree의 root node

크게 어렵지 않다.

일반적인 DOM Structure와 비교해도 크게 다를 것 없으며, 사용법 또한 동일. 그저 Shadow DOM 내부의 모든 것들은 Shadow Boundary 외부에 영향을 끼칠 수 없다는 것을 제외하고는 말이다.

Basic usage

앞서 Element.attachShadow() 메서드를 통해 Shadow DOM을 구성해봤는데, 여기서 두 가지 mode 를 지정해줄 수 있다.


const shadow = element.attachShadow({ mode: 'open' });
const shadow = element.attachShadow({ mode: 'closed' });

open : Element.shadowRoot property를 이용해 Shadow DOM에 대한 참조를 얻을 수 있음

closed : 참조가 불가능하게끔 Shadow DOM을 구성

무슨 말이냐?


const myShadowDOM = myCustomElement.shadowRoot; // when mode is 'open'

여기서 closed mode인 경우에는 Element.shadowRoot 에 null 이 들어가며, 당연히 이 경우는 어떠한 방법을 통해서도 Shadow DOM을 참조할 수 없다는 말이다.

이 때문에 앞서 constructor 내부에서는 참조를 위해 { mode: 'open' } 으로 설정한 것.

따로 예제는 해보지 않겠다. 위에서 진행한 것과 동일하기 때문.

Using Templates and Slots

여기서는 <template> 과 <slot> 태그에 대해 보도록 하겠다.

The truth about templates

재사용 가능한 components를 생성하기 위해서는 여러 방법이 있겠지만, <template> 태그를 이용하는 것이 가장 쉽고 편리한 방법이다.

<template> 내의 Nodes는 DOM에 렌더링되지는 않으나, Programmatic한 방법으로 참조가 가능하기 때문.


<template id="my-paragraph">
  <p>My Paragraph</p>

  <style>
    p {
      font-size: 30px;
    }
  </style>
</template>

가령 위와 같은 template이 있다면...


const template = document.getElementById('my-paragraph');
const templateContent = template.content;

document.body.appendChild(templateContent);

이렇게 DOM에 추가할 수 있게 된다.

다만 이러한 경우 위에서 지정한 style 은 전역적으로 선언된다는 것을 유의.

Using templates with Web Components

이를 web component와 함께 사용하는 방법은 다음과 같다.


customElements.define(
  'my-paragraph',
  class extends HTMLElement {
    constructor() {
      super();

      const template = document.getElementById('my-paragraph');

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

      this.shadowRoot.appendChild(template.content.cloneNode(true));
    }
  }
);

여기서 굳이 cloneNode() 를 하는 이유는? 어쨌든 Template은 하나이기 때문에 여러 곳에서 my-paragraph 를 사용하기 위해서는 cloneNode() 를 이용해야 정상적으로 동작하게 된다.

암튼 위와 같이 사용이 가능하다.

Adding flexibility with Slots

여기에 <slot> 태그를 이용해보도록 하겠다.

이를 이용하면 매우 flexible한 Web Component의 구성이 가능해진다.


<template>
	<p><slot></slot></p>
</template>

이렇게 template을 구성했다면, 다음과 같이 <slot> 태그 자리에 Element를 정의할 수 있게 된다.


<my-paragraph>
  TEXT
</my-paragraph>

렌더링 시 아래와 같다.


<p>TEXT</p>

만약 여러 개의 <slot> 이 필요하다면? 간단하게 이름을 지정해 사용이 가능하다.


<template>
  <p class="title"><slot name="title"></slot></p>
  <p><slot></slot></p>
</template>

이렇게 정의된 템플릿은 아래와 같이 사용이 가능하다.


<my-paragraph>
  <span slot="title">TITLE</span>
  Contents
</my-paragraph>

렌더링 시 아래와 같다.


<p class="title"><span>TITLE</span></p>
<p>Contents</p>

참고로... 지금은 <slot> 내부에 어떠한 내용도 들어가있지 않으나 만약 default node를 원한다면? 원하는 코드를 <slot> 내부에 넣어주도록 하자.


<template>
  <p><slot>default text</slot></p>
</template>

전체 코드

Scoped styles

끝으로, Styles를 Component 내에만 정의하는 방법에 대해 보겠다.

사실 방법은 간단한데, 그냥 Shadow DOM 내에 <style> 태그가 오게끔 만들어주면 된다.


const html = `
<div></div>

<style>
div {
  width: 100px;
  height: 100px;
  background-color: black;
}
</style>
`;

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

    this.attachShadow({ mode: 'closed' })
      .innerHTML = html;
}

위에서 <template> 태그를 이용했을 때는 <style> 태그에 존재하는 CSS Styles가 전역적으로 선언되었던 것에 반해, 위 코드는 Shadow DOM을 이용하기에 <style> 태그에 존재하는 CSS Styles는 Shadow Boundary 밖으로 영향을 끼칠 수 없게 된다.