[AngularJs2] 웹 컴포넌트

Front-End/AngularJs2

[AngularJs2] 웹 컴포넌트

리딩리드 2017. 3. 5. 16:08

웹 컴포넌트

1. 정의

- HTML, CSS, 자바스크립트를 하나의 단위로 묶어 주는 기술

- 위의 여러 기술을 합해져 하나의 웹 컴포넌트를 구성한다

- 웹 컴포넌트를 이용하려면 보완 라이브러리를 이용해야 한다(웹컴포넌트js,폴리머)

1) 기술 요소

- HTML 템플릿

- 템플릿 호출

- 쉐도우 DOM

- 커스텀 엘리먼트

2. HTML 템플릿

- 컴포넌트의 UI를 표현하는 영역

- 웹 페이지의 일부분으로 동작, 재사용이 가능하다

<template id="nav-item-template"> <div class="nav> <div class="item">main</div> <div class="item">service</div> </div> </template>

3. 템플릿 호출

- 정의한 템플릿을 외부에서 호출한다

- 문서 상단에 링크 엘리먼트를 이용해 호출한다

<head> <link rel="import" href="template.html"> </head>

1) 템플릿 실제 사용

- 스크립트 엘리먼트 안에 template.html 내용을 불러와 쿼리 선택자를 이용해 템플릿 노드를 현재 문서 DOM노드 밑으로 붙임

4. 쉐도우 DOM

- DOM에 엘리먼트에 대한 정의나 스타일과 같은 각종 정보가 저장된다

- 웹 페이지는 기본적으로 DOM을 가진다

A. 문서 DOM

- 현재 페이지에 대한 DOM

B. 쉐도우 DOM

- 웹 페이지가 실행되는 도중 가상으로 생성되는 DOM

- 문서 DOM 외부에 존재하기 때문에 문서 DOM에 정의한 스타일이나 이벤트가 적용되지 않고 캡슐화 된다

1) 쉐도우 DOM 호출

- 쉐도우 DOM은 쉐도우 경계가 있으며 쉐도우 호스트를 통해 호출된다.

- 현재 문서에 쉐도우 DOM을 포함할 때는 쉐도우 루트를 호출함

5. 커스텀 엘리먼트

- 이름을 임의로 정의해서 만든 엘리먼트

- 커스텀 엘리먼트는 빈 엘리먼트가 아닌 기능과 모양이 합쳐진 화면 구성 요소이다

<hello-button></hello-button>

<!doctype html> <head> <meta charset="utf-8"> <script> var proto = Object.create(HTMLElement.prototype); proto.createdCallback = function() { var shadow = this.createShadowRoot(); var button = document.createElement('button'); button.className = 'btn'; button.innerHTML = "Hello 버튼"; button.style.fontStyle = "20px"; shadow.appendChild(button); button.addEventListener('click', function(e) { alert("클릭했습니다"); }); }; document.registerElement('hello-button', { prototype: proto }); </script> <style> .btn{font-size:50px;} </style> </head> <hello-button></hello-button>