요새는 시간나면, 웹 컴포넌트 (특히 폴리머) 만 보고 있어서 하루 한글 쓰는 것도 어쩔 수 없이 웹 컴포넌트 관련해서 남깁니다. ^^;

지난번 글 ('Polymer에서의 반응형 웹') 에도 있었듯이, 웹 컴포넌트는 몇가지 새로운 표준과 기술을 포함하고 있습니다.

  * 커스텀 엘리먼트: 사용자가 태그등을 정의해서 사용

  * HTML 임포트: css와 js 처럼 html 도 <link rel="import" href="some.html"> 식으로 사용

  * 템플리트: <template> 태그를 이용하여 템플릿팅, 데이터 바인딩 등을 사용

  * 쉐도우 DOM: 위 요소들이 기존 DOM으로 들어올때 전체 DOM과 구별되는 별도의 쉐도우 DOM이 생성

사실 대부분의 브라우져에는, 위 기술의 일부가 이미 브라우져 자체에 구현되어 들어가 있다고 하네요..
(대표적으로 <video> 태그도 실제 구현은 위 기법? 으로 구현되어 있다네요..)

예를 들어 이미지 슬라이더를 웹 컴포넌트로 구현한 CSS-tricks의 예제를 보면,

위 기술들을 이용하면 이미지 슬라이더를 다음과 같은 코드로 간단명료하게 사용할 수 있게 됩니다.

<img-slider>
  <img src="path/to/image1.jpg">
  ...
  <img src="path/to/image4.jpg">
</img-slider> 

물론 이를 위해서 미리 구현된 '웹 컴포넌트'가 필요하고요.

아래는 <template> 로 만들어진 컴포넌트입니다. (css 부분은 생략)

<template>
  <div id="slider">
    <input checked="" type="radio" name="slider" id="slide1" selected="false">
    <input type="radio" name="slider" id="slide2" selected="false">
    <input type="radio" name="slider" id="slide3" selected="false">
    <input type="radio" name="slider" id="slide4" selected="false">
    <div id="slides">
      <div id="overflow">
        <div class="inner">
          <content select="img"></content>
        </div> <!-- .inner -->
      </div> <!-- #overflow -->
    </div>
    <label for="slide1"></label>
    <label for="slide2"></label>
    <label for="slide3"></label>
    <label for="slide4"></label>
  </div>
</template> 

기본적으로 <template> 태그는 화면에 렌더링하지 않도록 되어 있습니다.

위와 같은 <template>를 가져다가 <img-slider>내의 content로 치환하는 부분은 js로 구현합니다.

<script>
  // 템플릿을 선택
  var tmpl = document.querySelector('template');

  // 기본 HTMLElement를 확장하는 프로토타입 생성
  var ImgSliderProto = Object.create(HTMLElement.prototype);

  // 핵심: ImgSliderProtp가 생성될때 쉐도우 DOM을 생성하고 템플릿을 복제해서 붙혀넣기
  ImgSliderProto.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(tmpl.content, true));
  };

  // img-slider 라는 커스텀 tag를 등록 (등록될때 위 callback 함수가 호출, 템플릿처리)
  var ImgSlider = document.registerElement('img-slider', {
    prototype: ImgSliderProto
  });
</script>

크롬 최신판을 사용한다면 (그리고 아마도 파폭과 사파리도?), 위와 같은 구현이 어렵지 않게 가능합니다. 또한 작동하지 않는 브라우져를 위한 폴리필 (webcomponents.js) 도 있긴하지만.. IE11도 풀로 서포트를 하지 않으니 폴리필이라고 부르기도 무색하네요.. ^^;;

작동하는 링크는 http://dev.gnuboard.org/webcomponents/img-slider.html

개발자도구를 열어보면, <template> 부분은 #document-fragment로, 커스텀 엘리먼트인 <img-slider>는 #shadow-root 로 묶여있는 것을 볼 수 있습니다.

위 스샷에는 나오지 않았지만, <template>안에서 정의된 <style>은 <img-slider>에도 그대로 복제되어 들어가 있고, 해당하는 css 실렉터는 :host 등의 특별한 규칙들이 적용되어​, 기존 DOM과 분리됩니다.

자세한 내용은 html5 Rocks 페이지 (한글) 에서 확인하세요. 

또한 polymer 를 사용하면, 위 코드에서 js 부분을 생략할 수 있습니다. (그외에 여러가지 웹 컴포넌트를 처리하고요..)

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html">

<polymer-element name="img-slider" noscript>
  <template>
  ... (위의 template 안의 코드)
  </template> 
</polymer-element>

작동하는 코드는 http://dev.gnuboard.org/webcomponents/img-slider-polymer.html 입니다.

* * *

물론 IE10, IE11에서도 잘 작동하지 않는 현재 상황에서 웹 컴포넌트가 금방 정착하지는 않겠지만, 기술 자체로만 보자면, 웹(개발)을 보다 현대적으로 만들것이라는데에는 이견이 없을것 같습니다. ^^