10. “자주 사용되거나 구조적 분리가 필요한 요소를
다른 요소들과 충돌하지 않는
재활용 가능한 방법이 필요해요.”
11. “특히 분리되어 있는 HTML, CSS, JS를
하나로 묶어 쉽게 불러들일 수 있으면...”
12. Web
Components
더 적은 코드. 덜 혼란스럽게.
<paper-tabs>
<paper-tab>KNOWLEDGE</paper-tab>
<paper-tab>HISTORY</paper-tab>
<paper-tab>FOOD</paper-tab>
</paper-tabs>
14. Custom Element
● 새로운 엘리먼트의 정의. 기존 엘리먼트의 확장
HTML Imports
● HTML, CSS, JS를 로딩하고 싶다면?
Shadow DOM
● 캡슐화된 DOM, CSS의 스코프 분리
Template
● 드디어 등장한 네이티브로 지원되는 템플릿
Web Component를 지탱하는 4가지 규격!
17. <paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
Custom Elements
새 HTML 엘리먼트의 정의
선언적, 가독성
직관적인 HTML
확장 방법의 일반화 → 재사용성
@polyme
r
#itshackademic
23. var
compiled
=
_.template("hello:
<%=
name
%>");
compiled({name:
'moe'});
=>
"hello:
moe"
<script type="text/template">
// ...
</script>
Templating
HTML Templates 이전
Text Templating
Script Overloading
Offline DOM
<div id="mytemplate" hidden>
<img src="logo.png">
<div class="comment"></div>
</div>
24. <template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>...</script>
</template>
HTML Templates
네이티브로 구현된 클라이언트 기반의 템플릿
DOM 구조를 위해 DOM 사용 → no
XSS
파싱되나, 렌더링되지 않음
복제/사용 전까지 콘텐츠는 비활성
doc fragment → 페이지와 분리됨
1. 렌더링되지 않음
2. 스크립트는 실행되지 않음
3. 리소스(이미지, 오디오 등)는 로딩되지 않음
4. 문서 내에서 통상적인 DOM으로 액세스 불가
26. <script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '...', true);
xhr.responseType = 'document';
xhr.onload = function(e) {};
xhr.send();
</script>
Importing
HTML Imports 이전
<iframe>
Ajax
Script HACK!
<script type="text/html" src="..."></script>
27.
28.
29. Custom Elements
컴포넌트가 인터페이스를 가진 DOM Element 형태로 사용될 수 있도록...
Templates
컴포넌트의 골격이 사용하기 전까지 비활성화된 상태로 관리되도록...
Shadow DOM
컴포넌트의 스타일, DOM의 표현을 캡슐화하여 처리할 수 있도록...
HTML Imports
위의 요소들을 포함한 리소스(Markup, JS, CSS)를 로딩할 수 있도록...
웹 컴포넌트의 구성과 배포에 적합한 4가지 규격
34. Further readings...
It’s hackademic with Polymer
알아봅시다, Polymer: Web Components & Web Animations
Chrome Enchanted: 2014년 주목할만한 HTML5 규격 4종
웹 컴포넌트: 차세대 프론트엔드 웹 개발로 가는 관문
Introduction to Web Components
Shadow DOM 101: 기초
Shadow DOM 201: CSS와 스타일링
Shadow DOM 301: 고급 개념과 DOM API
HTML Imports: 웹을 위한 #include
Custom Element: HTML에 새로운 엘리먼트를 정의하기
HTML의 새로운 템플릿 태그