HTML5 의 표준 권고안이 채택되면서 HTML5는 엄청난 속도로 웹 전반에 걸쳐 보급되고 있습니다. HTML5 와 기존의 HTML4 / XHTML 1.1 과의 가장 큰 차잇점은 웹을 바라보는 관점입니다. 웹브라우저를 저작 플랫폼이 아닌 실행 환경으로 바라보는 HTML5의 독특한 관점은 webcomponent 에 잘 드러나 있습니다. 이 발표에서는 webcomponent 의 개념 및 역사를 훑고, webcomponent 오픈소스 구현체들인 webcomponents.js 및 구글의 Polymer, 모질라의 x-tag 과 함께 페이스북의 React 와의 비교 및 브라우저 대응에 대한 내용을 다룹니다.
14. ▪ ?
▪ Mozilla
▪ Google
▪ Apple
▪ Facebook
▪
▪ WHATWG (web hypertext application technology
working group)
15. :
▪ W3C
▪ Next HTML specification
▪ WHATWG (web Hypertext application technology
working group)
▪ Web application 1.0 ( 2004. 7)
▪ 2007 ~ 2012
▪ HTML5
▪ HTML5 “ (definition)”
16. More recently, the goals of the W3C and the WHATWG on the HTML
front have diverged a bit as well. The WHATWG effort is focused on
developing the canonical description of HTML and related
technologies, meaning fixing bugs as we find them adding new
features as they become necessary and viable, and generally tracking
implementations. The W3C effort, meanwhile, is now focused on
creating a snapshot developed according to the venerable W3C
process. This led to the chairs of the W3C HTML working group and
myself deciding to split the work into two, with a different person
responsible for editing the W3C HTML5, canvas, and microdata
specifications than is editing the WHATWG specification.
Ian Hickson (WHATWG editor)
21. ▪ (WHATWG HTML5 )
▪ HTML Import
▪ HTML
▪ Shadow DOM
▪ HTML DOM
▪ Custom Elements
▪ DOM leaf object /class
▪ Templates
▪
22. HTML Import
▪ HTML CSS import
▪ ,
custom element .
<link rel="import" href="name-card.html">
23. Shadow DOM
▪ DOM Tree leaf DOM
Tree
▪ Root DOM ( DOM)
Shadow DOM
▪ ) Root DOM Shadow DOM id
this.createShadowRoot().appendChild(new_element);
24. Custom Element
▪ DOM HTML5 object type
▪ ) <div>, <a> <name-card> custom
element .
document.registerElement('name-card', {
prototype: prototype
});
var ncElement = document.createElement('name-card');