Introduction to Web Components

Introduction to
Web Components

1. 웹 애플리케이션이란?
2. 웹 컴포넌트란?
3. 웹 컴포넌트를 지탱하는 규격들.

1. 웹 애플리케이션이란?

문서 처리를 지원하기 위해 문서에 추가되는 정보. 마크업 정보는 문서의 논리적 구성이나
체제와 같은 문서의 포맷을 지정하거나, 문서 내용의 찾아보기 또는 찾아보기 작업(indexing)
방법을 지정하거나, 문서 내용 중의 요소와 같은 문서 또는 다른 문서 중의 다른 요소와의
연결(link)을 지정한다. 마크업 정보를 표현하는 언어를 마크업 언어라고 한다. 마크업 정보를
문서 중에 삽입하는 작업을 말한다.
출처 : [네이버 지식백과] 마크업 [markup] (IT용어사전, 한국정보통신기술협회)

마크업 [markup]
1. 문서 처리를 지원하기 위해 문서에 추가되는 정보.
• 마크업 정보는 문서의 논리적 구성이나 체제와 같은 문서의 포맷을 지정하거나,
• 문서 내용의 찾아보기 또는 찾아보기 작업(indexing) 방법을 지정하거나,
• 문서 내용 중의 요소와 같은 문서 또는 다른 문서 중의 다른 요소와의 연결(link)을
지정한다.
• 마크업 정보를 표현하는 언어를 마크업 언어라고 한다.
2. 마크업 정보를 문서 중에 삽입하는 작업.
출처 : [네이버 지식백과] 마크업 [markup] (IT용어사전, 한국정보통신기술협회)

HTML (Hypertext Markup Language)

Introduction to Web Components

Jindo Component
jQuery Widgets
Bootstrap

지금 여러분이 개발하고 있는
컴포넌트... 안녕들 하십니까?

• 기존 방법으로 쓰이는 자바스크립트 라이브러리 컴포넌트를
W3C 에서 웹 컴포넌트(Web Component)라는 명세
(Specification)를 표준화시키고 있음.
• 현재 WorkingDraft (초안) 단계 (1/4)

• 컴포넌트의 캡슐화 (HTML/CSS/JavaScript)
• 네이티브 엘리먼트 (성능 개선)

Web Components
W3C Working Draft
http://www.w3.org/TR/2013/WD-components-intro-20130606/

웹 컴포넌트를
지탱하는 규격들.
Shadow DOM
HTML Template
Custom Element
HTML Imports

설정하기 chrome://flags (about:flags)

HTML 가져오기 사용
Enable-html-imports

실험용 자바스크립트 사용
Enable-Javascript-harmony

실험용 웹 플랫폼 기능 사용
Enable-experimental-web-platform-features

설정하기 Settings > General > Show Shadow DOM

1. DOM 트리의 캡슐화 문제를 다루고 있음.
- Style
- Script
2. 크롬 25 버전 이상에서 prefix 붙여 사용 가능함.
(설정하기 > 실험용 웹 플랫폼 기능 사용일 경우 prefix 필요 없음)

Shadow DOM can be applied to an element by calling the createShadowRoot method.
This returns a ShadowRoot node which can then be populated with DOM nodes.

An element with shadow DOM is called a shadow host. When an element has shadow DOM,
the element's children are not rendered; the content of the shadow DOM is rendered instead.

스타일 훅(Hook)
• CSS 셀렉터 ^와 ^^
• CSS 변수 사용

스타일의 상속 및 재설정
• .resetStyleInheritance
false - 디폴트. 상속 가능한 CSS 속성들이 상속을 유지
true - 경계에서 상속가능한 속성들을 initial으로 재설정
• .applyAuthorStyles
true - 저작자의 문서 내에 정의된 속성을 적용.
false - 디폴트. 저작 스타일은 섀도 트리에 적용되지 않음.

배포된 노드들의 스타일링
• ::content 의사 엘리먼트(pseudo element)
• 삽입지점들에서 스타일을 재설정하기
이벤트
Shadow Boundary를 넘지 못하는 이벤트
abort, error, select, change, load, reset, resize, scroll,
selectstart

덧붙여서… Style Scoped attribute
http://html5doctor.com/the-scoped-attribute/

Template
특별한 어플리케이션을 위한 시작점으로 사용되는
미리 작성된 형식을 가진 문서나 파일.
즉, 형식(Format)은 사용될 때마다 매번 재생성하지 않아도 됨.

1. 이것의 컨텐츠는 활성화가 될 때까지 효과적으로 비활성화됩니다.
기본적으로 여러분의 마크업 숨겨진 DOM이며 렌더링되지 않습니다.
2. 템플릿 안의 어떠한 컨텐츠라도 부작용을 가지지 않습니다.
템플릿이 사용될 때까지 스크립트는 실행되지 않으며 이미지는 로딩되지 않고 오디오는 재생되지 않는 등
3. 컨텐츠는 문서 내에 있지 않도록 고려되어야 합니다.
메인 페이지에서 document.getElementById()나 querySelector()의 사용은
템플릿의 자식 노드들을 반환하지 않을 것입니다.
4. 템플릿은 <head>, <body> 혹은 <frameset> 내의 어느 곳에도 위치할 수 있습니다.
"어느 곳에서도"는 <template>가 content model의 자식들을 제외한...
HTML 파서가 허가하지 않는 모든 위치에서도 안전하게 사용될 수 있다는 것을 의미한다는데
주의하시기 바랍니다.
또한 아래에서 보시다시피 <table>이나 <select>의 자식처럼 둘 수도 있습니다.

Modern web apps: built with <div> soup.

1. 새로운 엘리먼트를 개발자가 정의할 수 있음
• 하나의 태그에 사용자 지정 기능을 함께 논리적으로 제공하기
• 새 HTML/DOM elements 정의하기
• 다른 elements로부터 확장된 element 만들기
• 존재하는 DOM element의 API 확장하기
2. 주의사항
• 엘리먼트 이름은 반드시 dash(-)를 포함해야 함.

새로운 엘리먼트를 등록하는 방법
기본적으로 HTMLElement 를 상속받으나, 변경 가능함.
네이티브 엘리먼트를 확장하는 방법
- prototype을 반드시 상속받아야 함
- 지원하지 않는 브라우저에서는 HTMLUnknownElement 이다.

Unresolved elements
그들의 정의가 브라우저에 등록되기 전엔 선언되거나 만들어 질 수 없다.
이름 상속받은 parent 예
Unresolved element HTMLElement <x-tabs>, <my-element>,
<my-awesome-app>
Unknown element HTMLUnknownElement <tabs>, <foo_bar>

Lifecycle callback methods
element가 존재하는 시간 중 흥미로운 시간의 활용을 위한 방법을 정의할 수 있다.
Callback 이름 호출되는 시기
createdCallback element의 인스턴스가 생성되었을 때
attachedCallback document에 인스턴스가 삽입되었을 때
detachedCallback document에서 인스턴스가 삭제되었을 때
attributeChangedCallback
(attrName, oldVal, newVal)
속성이 추가되거나, 삭제되거나, 갱신되었을 때

Script
<script type="javascript" src="js/common.js">
CSS
<link rel="stylesheet" type="text/css" href="css/common.css">
Tags
<img>, <video> , <audio> , <iframe> ...
기존 웹페이지 Imports 방식

선언하기.
<link rel="import" href=“xxx.html">
사용하기.
 Chrome ver.31 이상부터 지원됨.
 다른 도메인일 경우 CORS(Cross-Origin Resource Sharing)가 되어야 함
 지원 여부를 확인할 수 있음.
 onload, onerror 이벤트 사용할 수 있음.
 import 를 동적으로 변경할 수 있음.
 import 된 페이지의 DOM에 접근 가능함.

Shadow DOM
• 컴포넌트를 구성하는 DOM과 스타일을 캡슐화.
HTML Template
• DOM의 복제를 통한 재사용.
Custom Element
• 사용할 엘리먼트를 개발자가 직접 등록할 수 있음.
• 컴포넌트의 명시적인 Alias를 선언.
HTML Imports
• 웹 문서 내에 외부 리소스를 포함(Import)하기 위한 기능을 제공

http://www.polymer-project.org/
http://mozilla.github.io/brick/
Library
Building blocks for the web (Google)
https://www.youtube.com/watch?v=VMVj_jR75vE
UI Components for Modern Web Apps (Mozilla with xTag)

• [튜토리얼/MashUp] 웹 컴포넌트: 차세대 프론트엔드 웹 개발로 가는 관문
(Web Component: the Gate of Next Front-end Web Developments)
http://html5rocksko.blogspot.kr/2014/02/mashup-web-component-evolution-of-web-development.html
• Web Components: A Tectonic Shift for Web Development
https://html5-demos.appspot.com/static/webcomponents/index.html
https://developers.google.com/events/io/sessions/318907648
• Introduction to Web Components
http://www.w3.org/TR/components-intro/
• WebComponents.org
http://webcomponents.github.io/
• The Chromium Projects > Blink > Web Components
http://www.chromium.org/blink/web-components
• 웹 컴포넌트
http://helloworld.naver.com/helloworld/188655
끝.

Introduction to Web Components

More Related Content

What's hot (13)

Viewers also liked (14)

Similar to Introduction to Web Components (20)

Introduction to Web Components

Editor's Notes