Web Component - Ploymer

Web Component

재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모음

구성요소

Custom Elements

커스텀 태그를 통한 요소 생성

새로운 HTML 요소를 생성하여 다른 요소에 확장한다.

HTML Imports

HTML 페이지 로딩

HTML/CSS/JS를 묶음 형태로 사용한다. 단일 URL로 호출한다.

다른 도메인의 리소스를 로딩하기 위해서 CORS 활성화가 필요하다.

HTML Templates

템플릿

태그 내 태그들은 사용되기 전까지는 파싱은 되나 렌더링되지 않는다.

비활성화 상태의 복제 가능한 DOM chunk

Shadow DOM

DOM과 스타일의 캡슐화

별도의 스코프를 갖는 DOM을 말한다.

폴리머에서 생성하는 모든 요소들은 shadowDOM으로 처리한다.

Polymer

Polymer는 web component를 이용하여 HTML 캡슐화 및 커스텀 엘리먼트를 기반으로

데스크톱과 모바일 웹 애플리케이션 개발을 쉽고 빠르게 도와주는 라이브러리이다.

구글이 웹 컴포넌트 스펙에 따라 구현한 것이다.

polyfill을 통해서 이전 브라우저에 대한 대체 코드를 지원하며

paper element collection을 지원하여 머터리얼 디자인의 적용을 도와준다.

Core Element

유틸리티 요소와 공통적 UI 요소들의 모음

ex> Ajax, Animation, Drag&Drop, icon group, Tool tip etc.

Paper Element

Material design이 적용된 UI 요소들의 모음

ex> 버튼, 체크박스, 다이얼로그, 입력요소, 탭, 토스트 etc

>>  Web Component의 현주소  >>

Reference : http://hacks.mozilla.or.kr/2015/08/the-state-of-web-components-web-component/