MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Web Components

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

초안
이 문서는 작성중입니다.

웹 컴포넌트는 여러개의 별도기술로 구성되어 있습니다. 당신은 웹 컴포넌트를 open 웹기술을 이용해 만들어진 재사용 가능한 사용자 인터페이스 위젯으로 생각 할 수 있습니다. 이것은 브라우저의 일부분이고, 그래서 jQuery나 Dojo 같은 외부 라이브러리를 필요로 하지 않습니다. 기존에 있는 웹 컴포넌트는 코드를 작성하지 않고 간단히 HTML페이지에 import 구문을 추가하는 형식으로 사용 가능합니다.

Note: 이것은 현재 실험중인 기술입니다. 당신이 사용하는 브라우저에서 웹 컴포넌트를 지원해야만 합니다.  Enabling Web Components in Firefox 참조.

현재 시점 기준으로, 위의 설명은 적절히 잘 되었지만 웹 컴포넌트가 무슨 목적으로 만들어지는 지에 대해서는 다른 여지가 있습니다. 웹 컴포넌트로 HTML, CSS, JavaScript로 할 수 있는 대부분의 것들을 할 수 있고 쉽게 재사용이 가능한 portable 컴포넌트가 될 수 있습니다.

가끔 웹 컴포넌트와  Google Polymer 간의 혼란이 있습니다. Polymer는 웹 컴포넌트 기술을 기반으로 한 프레임워크입니다. 당신은 Polymer없이 웹 컴포넌트를 만들고 이용할 수 있습니다.

웹 컴포넌트는 아직 모든 브라우져에서 완전히 구현되지 않았습니다. 그래서 지금 현재(2015년 1월) 대부분의 브라우져에서 제대로 이용하기 위해서는 아마도 브라우저 기능의 갭을 채우기 위한 폴리필 (polyfill)들이 필요할것입니다. Polyfill들은  Google Polymer project에서 찾아볼 수 있습니다. 어느 브라우져에서 웹 컴포넌트를 구현했는지 알아보려면 Are We Componentized Yet? 를 참조.

웹 컴포넌트는 아래의 네가지 기술로 구성되어 있습니다(각각 별도로 이용 될 수도 있습니다):

웹 컴포넌트 스펙은 아래의 내용을 정의 합니다:

Firefox에서 웹 컴포넌트 활성화

웹 컴포넌트 기능은  firefox에서 기본값으로 비활성화 되어 있습니다. 이를 활성화 하기 위해서는 about의 config 페이지로 가서 보이는 모든 경고를 해제해 주어야 합니다. 그리고 dom.webcomponents.enabled 란 perference를 찾아 true로 세팅합니다.

Firefox enable web components

스펙

스펙 상태 설명
Custom Elements Working Draft  
WHATWG HTML Living Standard
The definition of 'template element' in that specification.
Living Standard No change
HTML5
The definition of 'template element' in that specification.
Recommendation Initial definition
Shadow DOM Working Draft  
HTML Imports Working Draft  
CSS Scoping Module Level 1 Working Draft  

문서 태그 및 공헌자

 이 페이지의 공헌자: namkwon, maybe
 최종 변경: namkwon,