Custom Element는 웹 컴포넌트를 지탱하는 4가지 규격 중의 하나입니다. Shadow DOM이 컴포넌트의 DOM, CSS, JS 등을 감추는 역할(encapsulation)을 하고, HTML Template가 DOM의 복제 및 재사용성을 제공하고, HTML Imports가 웹 문서 내에 외부 HTML 문서 리소스를 포함(Import)하기 위한 기능을 제공한다면 Custom Element는 웹 문서에서 사용할 엘리먼트를 모듈에서 직접 등록할 수 있도록 하는 기능을 제공하여 컴포넌트의 명시적인 alias를 선언하는 역할을 합니다.
이번 번역은 '신현진'님께서 진행하셨습니다. html5rocks.com 관련한 contribution 가이드도 번역을 해놓으셨네요. 관심있으신 분들은 방문해보시기 바랍니다. :)
TL;DR;
웹은 문서의 구조적인 형식을 가지고 있지만 HTML 엘리먼트가 미리 정의된 엘리먼트에 대해서만 사용 가능하다는 문제로 현재에도 웹앱을 구축하는데 있어서는 많은 이슈를 안고 있습니다. <div>가 끝도 없이 중첩되어 나타나는 <div> Soup가 대표적인 예입니다.
Custom Element는 HTML의 엘리먼트를 사용자가 문서에서 확장하여 사용할 수 있도록 기능을 제공하고 있으며 Web Components에서 가장 중요한 기본 API입니다. Web Components는 다음과 Custom Element에 의한 확장이 반드시 필요합니다.
이 글에서는 아래 내용에 대한 개념 설명과 구현 예제를 설명하고 있습니다.
Custom Element는 HTML의 엘리먼트를 사용자가 문서에서 확장하여 사용할 수 있도록 기능을 제공하고 있으며 Web Components에서 가장 중요한 기본 API입니다. Web Components는 다음과 Custom Element에 의한 확장이 반드시 필요합니다.
이 글에서는 아래 내용에 대한 개념 설명과 구현 예제를 설명하고 있습니다.
- 새로운 HTML/DOM 엘리먼트 정의
- 다른 엘리먼트로부터 엘리먼트 확장
- 태그에 대한 사용자 기능의 확장
- 기존 DOM 엘리먼트 API 확장
참고 글
- 'Custom Element'를 통한 새로운 엘리먼트의 정의
- Yeoman과 Polymer를 이용한 웹앱 개발
- 원문 - Building Web Apps With Yeoman And Polymer
- 번역 - Yeoman과 Polymer를 이용한 웹앱 개발 (live)
댓글 없음:
댓글 쓰기