[하루한글] 웹 컴포넌트 정보
반응형화 [하루한글] 웹 컴포넌트본문
요새는 시간나면, 웹 컴포넌트 (특히 폴리머) 만 보고 있어서 하루 한글 쓰는 것도 어쩔 수 없이 웹 컴포넌트 관련해서 남깁니다. ^^;
지난번 글 ('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에서도 잘 작동하지 않는 현재 상황에서 웹 컴포넌트가 금방 정착하지는 않겠지만, 기술 자체로만 보자면, 웹(개발)을 보다 현대적으로 만들것이라는데에는 이견이 없을것 같습니다. ^^
4
댓글 3개
근데, 이런 공부는 대체 언제 하시는거예요?
저도 회사 다니면서 틈틈이 공부를 하려고는 하는데, 깊이가 다르네요ㅋㅋ