웹 컴포넌트란?
웹 도큐먼트의 표현을 위젯이나 컴포넌트로 빌딩함. html 엘리먼트끼리 상호작용하고 encapsulation되게 만드는 기술.
웹 컴포넌트 구성요소
1. shadow DOM
- DOM과 Style을 인캡슐레이션 해준다.
- 예전에는 iframe등을 통해 위의 효과를 얻었다.
- shadow dom 외부의 js는 접근이 안된다.
- shadow boundary의 style은 외부로 영향을 미치지 않는다.
- polyfill : 지원되지 않는 브라우저에서도 지원될 수 있게 도와주는 스크립트 파일이라고 보면된다.
webcomponents.js 파일 같은 경우가 polyfill 파일이고 이것을 <script src="webcomponents.js"> 하면 Shadow DOM에 대해 모든 브라우져에서 사용할 수 있다.
2. HTML Templates
- <template id="name"> ... </template> 형태로 DOM에서 작용할 태그를 정의한다.
- <template> 태그에 있는 것은 DOM에 들어가지 않는다.
- 스크립트를 통해 DOM에 포함되는 구조이다.
- <template> 태그는 크롬과 몇개 브라우져만 지원하고 있다. 그러나 이것 역시 polyfill을 설치하면 모든 브라우져에서 수행가능함.
3. Custom Elements
- HTML에 새로운 태그를 정의하는 것이다. 마치 Angular의 Directive(지시자)와 유사하다.
- <element name="x-dowon"> ...</element> 으로 하면 <x-dowon> 태그를 사용할 수 있다.
- 엘리먼트의 lifecycle 콜백이 존재한다.
- 사용자 정의 엘리먼트를 만들기 위해 Shadow DOM, HTML Template 등이 필요한 것이다.
- document에 register(<custom elements>)를 등록한다.
4.HTML Imports
- <link rel="import" href="x-dowon.html"> 설정을 <head> 태그안에 둔다.
- 사용하려는 웹 컴포넌트의 확장자 .html을 import 타입으로 link 태그를 사용한다.
[출처- 참고] http://mobicon.tistory.com/440
'# Work > └ Google Polymer' 카테고리의 다른 글
| polymer로 만든 사이트 (0) | 2015.06.01 |
|---|---|
| Polymer란 (0) | 2015.05.28 |