Custom Elements

defining new elements in HTML

HTML5 Rocks

This article discusses APIs that are not yet fully standardized and still in flux. Be cautious when using experimental APIs in your own projects.

소개

웹은 표현에 대해 심각한 부족함을 갖고 있습니다. 무슨 뜻인지 알고 싶다면 다음에서 예로 드는 지메일 같은 "모던" 웹앱에서 확인해볼 수 있습니다.

Modern web apps: built with <div> soup.
soup에 대해서는 모던 하지 않습니다. 그리고 아직까지도 이것은 우리가 웹앱을 구축하는 방법이며 슬픕니다. 플랫폼에게 더 많이 요구하지 말아야 할까요?

좋은 마크업을 만들어 봅시다.

HTML은 문서를 구조화 하기 위한 훌륭한 도구를 제공합니다만 [HTML 표준](http://www.whatwg.org/specs/web-apps/current-work/multipage/) 정의 엘리먼트들에 한정되어 있습니다. 어떤 마크업이 지메일을 끔찍해 보이지 않게 할까요. 어떤 마크업이 지메일을 아름답게 보이게 할까요.:

Feelin' this Web Components thing.

Heard of it?

...

얼마나 상쾌한가요! 위의 코드의 element들은 전체적으로 의미가 있습니다. **의미가 있으며**, **이해하기 쉬우며**, 그리고 무엇보다도 **유지보수가 가능합니다**. 미래의 저와 여러분은 단지 그것이 선언된 뼈대만을 검사하는 것만으로도 무엇을 하는 코드인지 정확히 알수 있을 것입니다.
우리를 돕는 custom element가 우리의 유일한 희망입니다!

시작하기

[Custom Elements](http://w3c.github.io/webcomponents/spec/custom/)는 **모든 웹 개발자들이 새로운 타입의 HTML element를 정의 하는 것을 허락합니다.** 이 사양은 [Web Components](http://w3c.github.io/webcomponents/explainer/) 산하 몇몇 새로운 기본 형식 API 중 하나입니다만 이 사양이 가장 중요할 것입니다. Web Components는 Custom Element에 의해 해제된 특성 없이는 존재하지 않습니다.: 1. 새 HTML/DOM elements 정의하기 2. 다른 elements로부터 확장된 element 만들기 3. 하나의 태그에 사용자 지정 기능을 함께 논리적으로 제공하기 4. 존재하는 DOM element의 API 확장하기

새 elements 등록하기

Custom element는 `document.registerElement()`를 사용하여 만듭니다.: var XFoo = document.registerElement('x-foo'); document.body.appendChild(new XFoo()); `document.registerElement()`의 첫번째 인자는 element의 태그 이름입니다. 태그 이름은 **반드시 dash(-)를 포함해야 합니다.** 그래서 예를 들면, `<x-tags>`, `<my-element>`, 그리고 `<my-awesome-app>`은 모두 유효한 이름이며 `<tabs>` 그리고 `<foo_bar>`는 유효하지 않습니다. 이 제한 조건은 parser가 일반 element 들로부터 custom element를 구별할 수 있도록 하며 HTML 에 새 태그가 추가될때 앞으로의 호환성을 보장합니다. 두번째 인자는 element의 `prototype`을 표현하는 (optional) object 입니다. 이것은 element에 사용자 지정 기능 (예를 들어 공용 속성 및 메서드들)을 추가할 수 있습니다. [그 이상의 기능은 아래에 설명합니다.](#publicapi) 기본적으로 custom element는 `HTMLElement`에서 상속됩니다. 따라서 앞의 예제는 다음의 예제와 동일하게 동작합니다.: var XFoo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); `document.registerElement('x-foo')` 를 호출하는 것은 새 element에 대해 브라우저에 알려주며 `<x-foo>` 인스턴스를 만드는 데 사용할 수 있는 생성자를 반환합니다. 생성자를 사용하지 않으려는 경우 [element를 인스턴스화 하는 다른 기술](#instantiating)을 사용할 수도 있습니다.

생성자가 전역 window 객체 끝에 위치하는 것을 원하지 않는다면 namespace 안에 넣거나(var myapp = {}; myapp.XFoo = document.registerElement('x-foo');) 특정 영역에 놓습니다.

elements 확장

Custom elements는 여러분이 이미 존재하는 (native) HTML elements 뿐만 아니라 다른 custom elements를 확장하는 것을 허용합니다. element를 확장하려면 상속받으려는 element의 이름과 `prototype`을 `registerElement()`로 전달해야 합니다.

native element의 확장

여러분은 일반적인 Joe™ `<button>`에 만족하지 못합니다. 여러분은 그 기능을 "Mega Button"으로 확장하고 싶습니다. `<button>` element를 확장하기 위해서는 `HTMLButtonElement` 의 `prototype`으로부터 상속받는 새로운 element를 만들어야 하며 element의 이름을 `extends`해야 합니다. 아래의 경우 "button"입니다.: var MegaButton = document.registerElement('mega-button', { prototype: Object.create(HTMLButtonElement.prototype), extends: 'button' });

element B로부터 확장하여 element A를 만들기 위해서 element A는 반드시 element Bprototype으로부터 상속 받아야 합니다.

native elements로부터 상속받은 custom element는 _타입 확장 custom elements_이라 부릅니다. "element X is a Y"와 같은 방법으로 `HTMLElement`의 특별화된 버전으로부터 상속 받을 수 있습니다. 예: ```

:unresolved의 더 많은 정보는 Polymer의 elements 스타일링 가이드 참조.

이력과 브라우저 지원

기능 탐지

기능 탐지는 document.registerElement()의 존재 유무를 확인한다.:

function supportsCustomElements() {
  return 'registerElement' in document;
}

if (supportsCustomElements()) {
  // 사용가능합니다!
} else {
  // 컴포넌트를 만들기 위해 다른 라이브러리를 사용하세요.
}

브라우저 지원

document.registerElement()는 Chrome 27, Firefox ~23에서 처음 지원되었습니다. 그러나 스펙에 포함된 것은 최근 입니다. Chrome 31은 갱신된 스펙을 지원하는 최초 버전입니다.

custom element는 Chrome 31 에서 "실험 웹 플랫폼 기능"으로 about:flags에 활성화 할 수 있었습니다.

브라우저의 지원이 활성화될 때까지 Google's Polymer와 Mozilla's X-Tag 모두에서 사용할 수 있는 polyfill이 존재합니다.

HTMLElementElement에 무슨 일이 발생하나요?

표준화 작업에 따르면 여러분이 &lt;element&gt;로 알고 있던 것들입니다. 여러분은 새로운 element를 등록하여 그것을 사용할 수 있습니다:

<element name="my-element">
  ...
</element>

불행하게도 upgrade process의 너무 많은 타이밍 이슈, corner cases 그리고 그것을 모두 해결하는 아마겟돈과 같은 시나리오들이 있었습니다. &lt;element&gt; 는 보류 되었습니다. 2013년 8월에 Dimitri Glazkov는 그것의 제거 발표를 public-webapps에 포스팅 하였습니다. (적어도 지금까지는)

&lt;polymer-element&gt;로 element 등록의 선언적 형태를 구현하는 것은 주목할 만한 가치가 있습니다. 어떻게 사용되나요? 그것은 document.registerElement('polymer-element')와 제가 template으로부터 elements 만들기에 설명한 기술들로 사용합니다.

결론

custom element는 HTML의 문법을 확장하고, 새로운 트릭을 가르쳐주며 웹 플랫폼의 웜홀을 통해 이동하는 도구를 우리에게 제공합니다. Shadow DOM 과 &lt;template&gt;과 같은 새로운 플랫폼 기본요소와 custom element를 결합하여 우리는 웹 컴포넌트들의 그림을 실현하기 시작합니다. markup은 다시 좋아 질수 있습니다.

여러분이 웹 컴포넌트들과 시작하는 것에 흥미를 느낀다면 저는 Polymer 확인을 추천합니다. 그것은 여러분이 시도하기에 충분한 것 이상을 얻을 수 있습니다.

Comments

0