Web Components 101Polymer & Brick

전용우

Web Components?

• 컴포넌트를 만드는 기술 .• 기존의 자바스크립트 컴포넌트와 비슷함 .

설정하기 .

• Chrome Canary (31+)• about:flags– Enable HTML Imports

• HTML 가져오기 사용– Enable Experimental JavaScript

• 실험용 자바스크립트 사용– Enable experimental Web Platform features

• 실험용 웹 플랫폼 기능 사용• Devtool– General - Show Shadow DOM

구성• Shadow DOM• Template• Custom Element• HTML Import

Shadow DOM

• 숨어있는 DOM subtree.• 캡슐화할 수 있음 .• 외부와 context 가 다르기 때문에 접근할 수

없음 .

Shadow DOM 만들기<div id="temp"></div> <script>

var host = document.querySelector('#temp'); var root = host.createShadowRoot(); root.innerHTML = ‘<b> 안녕 . Shadow DOM!</b>';

</script>

#temp – shadow host

shadow root

<b> 안녕 . Shadow DOM</b>

shadow boundary

Content Element

• root 에 있는 엘리먼트의 위치를 이동시키는 엘리먼트 .

<div id="temp"> <div class="pre"> 앞으로 </div> <div class="next"> 뒤로 </div>

</div> <script>

var host = document.querySelector('#temp'); var root = host.webkitCreateShadowRoot(); root.innerHTML = '<content select=".next"></content>'+

'<b part="hi"> 안녕 . Shadow DOM!</b>'+ '<content select=".pre"></content>';

</script>

Content Element#temp – shadow host

shadow root

b

div.pre

div.next

select=“.next” select=“.pre”

Styling #1

• applyAuthorStyles, resetStyleInheri-tance –외부에서 정의한 스타일이 적용 유무 (false)

–상속되는 스타일의 적용 유무 (true)

• Part Pseudo Selector–외부에서 Shadow DOM 의 스타일을 변경할 수

있게 해주는 가상 선택자 .( 구 . pseudo)

Styling #2

• CSS Variable–변수를 이용하여 Shadow DOM 을 스타일링

가능 . ( 위젯 같은 데서 사용하기 좋음 )

Template

• 일반적인 자바스크립트 템플릿과 유사• HTML, CSS, JS 묶음 .• 사용하기 전에는 아무런 영향이 없음 .• 내부 리소스 등을 내려 받지 않음 .(image) • 파싱만 함 .• 스크립트 실행 안됨 .

Template 만들기<div id="temp">

<div class="pre"> 이건 앞이지 </div> <div class="next"> 이건 뒤지 </div>

</div>

<template id="test"> <style type="text/css">

b{ color : var(preColor); } </style> <content select=".next"></content> <b part="hi"> 안녕 . Shadow DOM!</b> <content select=".pre"></content>

</template>

<script> var host = document.querySelector('#temp'); var root = host.webkitCreateShadowRoot(); var temp = document.getElementById("test").content.cloneNode(true); root.appendChild(temp);

</script>

Custom Element

• 개발자가 새로운 엘리먼트를 만들 수 있음 .• Native 엘리먼트를 확장하여 만들 수 있음 .• 이벤트나 속성들을 만들 수 있음 .

등록하기

var XButton = document.register('x-button'); var xButton = new XButton(); //var xButton = document.createElement("x-button"); document.body.appendChild(xButton);

<x-button></x-button>

※ element 태그를 이용하여 선언하는 (declarative) 방법으로 등록했지만 현재 spec 에서 삭제 .

속성 / 메서드 추가하기var xButtonProto = Object.create(HTMLButtonElement.prototype,{

length : { get : function(){//length readonly 속성 지정

return this.textContent.length;}

} }); xButtonProto.some = function(){ //method 추가

alert("some"); }

var XButton = document.register('x-button',{ prototype: xButton-Proto }); var xButton = new XButton(); xButton.textContent=" 테스트버튼입니다 ."; document.body.appendChild(xButton);

xButton.some();//alert("some"); alert(xButton.length);// 9

lifecycle 콜백이벤트명 설명createdCallback 생성될 때 enteredViewCallback document 에 붙일 때leftViewCallback document 에서 때어 졌을 때attributeChangedCallback(attributeName, oldVal, newVal)

속성이 변경될 때( 속성 명 , 예전 값 , 변경 값 )

xButtonProto.createdCallback = function(){ alert(" 생성 ");

}

xButtonProto.enteredViewCallback = function(){ alert(" 삽입 ");

}

xButtonProto.leftViewCallback = function(){ alert(" 삭제 ");

}

xButtonProto.attributeChangedCallback = function(attr, oldAttr, newAttr){ alert(attr+" 가 "+oldAttr+" 에서 "+newAttr+" 으로 변경 ");

}

가상 이벤트 생성var xButtonProto = Object.create(HTMLButtonElement.prototype,{

createdCallback : { value : function(){

this.style.cssText="border:1px solid red; padding:10px;"; var key; this.addEventListener("mousedown",function(){

key = setTimeout(function(){ var event = new CustomEvent("longtap",

{"detail": {"time":new Date()}}); this.dispatchEvent(event); key = null;

}.bind(this),1000); }); this.addEventListener("mouseup",function(){

if(key){ clearTimeout(key); } });

} }

});

var XButton = document.register('x-button',{ prototype: xButtonProto }); var xButton = new XButton(); xButton.textContent= ＂버튼입니다 .";

xButton.addEventListener("longtap",function(e){ alert("longtap"); console.log(e);

});

HTML Import

• Web Components 을 적용하기 위한 방법– import 된 html 은 표현되지 않음– Cross-Origin Resource Sharing–같은 document 가 아님 .

<link rel="import" href="/path/to/some/im-port.html">

var link = document.querySelector('link[rel=import]'); var import = link.import; var templateButton= import.querySelector('template.button');

간단한 버튼 만들어 보기

지원 현황

Chrome(m)

Chrome Firefox IE10+ Safari 6+ Safari(m)

Shadow DOM

Template

Custom Ele-ment

HTML Import

Web Components 라이브러리• Polymer–구글에서 개발

• Brick(with xTag)

–모질라에서 개발

Polymer

platform.js

• Web Components polyfills 라이브러리• Template 의 기능이 추가 .(bind, if, re-

peat…)• html import 가능 ( 불안함 .)

• 기타 기능 제공– Pointer Event–Web Animation– Node.bind

polymer.js

• web components 기능을 확장–선언하여 등록– Data-binding–선언하여 함수 할당 … ..

<polymer-element name="g-cool"><template>

<button on-click="{{buttonClick}}">{{name}}</button> </template> <script>

Polymer('g-cool', { name : "mixed", buttonClick: function(event, detail, sender) { ... } });

</script> </polymer-element>

기타Polymer 로 만든 엘리먼트 ( 컴포넌트 )

• Element– UI 가 없고 기능만 있는 엘리먼트– Ajax, localStorage….

• UI Element– UI 가 있는 엘리먼트– Accordion, Slider….

지원 현황

Chrome(m)

Chrome Firefox IE10+ Safari 6+ Safari(m)

Shadow DOM

Template

Custom Ele-ment

HTML Import

Brick

• xTag 을 기반으로 만든 라이브러리

xTag

• polyfill– document.register 사용가능– shadow dom 은 지원 안 함 .– html import 가능

• xTag– polyfill 에서 유틸 기능들이 추가 .

Brick

• xTag 을 이용하여 만든 컴포넌트– Flipbox, tooltip….

지원 현황

Chrome(m)

Chrome Firefox IE9+ Safari 6+ Safari(m)

Shadow DOM

Template

Custom Ele-ment

HTML Import

Why Web Components?

• 컴포넌트가 동작하는 영역이 분리되어 성능이 좋음 .

• 모듈화 되어 있어 사용하기 좋음 .• 높은 접근성 .• 보다 시멘틱해짐 .• 향후 컴포넌트 표준이 될 가능성이 높음 .

(AngularJS, EmberJS 은 Web Components 로 변경할 계획 . Dart 에서도 사용 )

• 웹 생태계에 많은 도움을 줄 것 같음 .

감사합니다 .