10. Custom Elements
컴포넌트가 인터페이스를 가진 DOM Element 형태로 사용될 수 있도록...
Templates
컴포넌트의 골격이 사용하기 전까지 비활성화된 상태로 관리되도록...
Shadow DOM
컴포넌트의 스타일, DOM의 표현을 캡슐화하여 처리할 수 있도록...
HTML Imports
위의 요소들을 포함한 리소스(Markup, JS, CSS)를 로딩할 수 있도록...
웹 컴포넌트의 구성과 배포에 적합한 4가지 규격
27. <div><h3>Light DOM</h3></div>
<script>
var root =
document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' +
'<h3>Shadow DOM</h3>';
</script>
Shadow
DOM
Shadow DOM
지정된 DOM을 정의한 DOM 트리로 렌더링
28. <div>Content new Shadow DOM</div>
<script>
var root =
document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' +
'<h3><content></content></h3>';
</script>
Shadow DOM
콘텐츠와 프레젠테이션의 분리
o <content></content>
29. <div>Content new Shadow DOM<h3>Im the one</h3></div>
<script>
var root = document.querySelector('div').createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style>' +
'<h3><content select=”.the-one”></content></h3>';
</script>
Shadow DOM
콘텐츠와 프레젠테이션의 분리
o <content></content>
o <content select=”<SELECTOR>”></content>
30. var shadow = el.createShadowRoot();
shadow.innerHTML = “<style>h2 { color: red; }</style>” +
“<h2>I’m a profile-card</h2>”;
<polymer-element name=“profile-card” noscript>
<template>
<link rel=“stylesheet” href=“styles.css”>
<h2>I’m a profile-card</h2>
</template>
</polymer-element>
polymer
Shadow DOM
Custom Element 등록 시 자동 적용
웹컴포넌트
API