웹 구성요소가 교차 브라우저 지원을 얻고 있으며, 커뮤니티가 급속도로 성장하고 있습니다. 또한 필요한 구성요소를 정확하게 찾을 수 있는 새로운 웹 구성요소 카탈로그도 있습니다.
여러 프로젝트에서 쉽게 사용하거나 다른 개발자가 사용하는 JavaScript 프레임워크와 관계없이 다른 개발자와 공유할 수 있는 자체 완결형 JavaScript 구성요소를 빌드하고 싶으신가요? 웹 구성요소를 사용해 보세요.
웹 구성요소는 자체 HTML 요소를 만들 수 있는 새로운 웹 플랫폼 기능의 집합입니다. 각각의 새 맞춤 요소는 <my-button>와 같은 맞춤 태그를 가질 수 있으며 내장 요소의 모든 장점을 갖습니다. 맞춤 요소는 속성과 메서드를 가질 수 있고, 이벤트를 실행하고 이에 응답할 수 있으며, 캡슐화된 스타일과 DOM 트리를 사용하여 고유한 모양과 느낌을 가질 수도 있습니다.
웹 구성요소는 플랫폼 기반의 하위 수준 구성요소 모델을 제공하므로 특수 버튼부터 datepicker와 같은 복잡한 뷰에 이르기까지 모든 항목에 재사용 가능한 요소를 빌드하고 공유할 수 있습니다. 웹 구성요소는 강력한 캡슐화 프리미티브가 포함된 플랫폼 API로 빌드되므로 이러한 구성요소를 다른 JavaScript 라이브러리 또는 프레임워크 내에서 표준 DOM 요소인 것처럼 사용할 수도 있습니다.
Web Components에 대해 들어보셨을 수도 있습니다. Web Components 사양의 초기 버전인 v0은 Chrome 33에서 제공되었습니다.
현재 브라우저 공급업체 간의 광범위한 협력 덕분에 차세대 Web Components 사양인 v1이 널리 지원되고 있습니다. Chrome은 Chrome 53 및 Chrome 54부터 웹 구성요소를 구성하는 두 가지 주요 사양인 Shadow DOM 및 커스텀 요소를 지원합니다. Safari는 Safari 10의 Shadow DOM v1 지원을 출시했으며 WebKit의 Custom Elements v1 구현을 완료했습니다. Firefox는 현재 Shadow DOM 및 Custom Elements v1을 개발하고 있으며 Shadow DOM 및 Custom Elements는 모두 Edge의 로드맵에 있습니다.
v1 구현을 사용하여 새 맞춤 요소를 정의하려면 ES6 문법을 사용하여 HTMLElement를 확장하는 새 클래스를 만들고 브라우저에 등록하기만 하면 됩니다.
class MyElement extends HTMLElement {...}
window.customElements.define('my-element', MyElement);
새로운 v1 사양은 매우 강력합니다. 시작하는 데 도움이 되도록 맞춤 요소 v1 및 Shadow DOM v1 사용에 관한 튜토리얼을 준비했습니다.
webcomponents.org
웹 구성요소 커뮤니티도 급속도로 성장하고 있습니다. 개발자가 구성요소를 공유할 수 있는 통합 카탈로그를 포함하여 웹 구성요소 커뮤니티의 핵심인 업데이트된 webcomponents.org 사이트가 출시되어 기쁩니다.
webcomponents.org 사이트에는 Web Components specs에 관한 정보, Web Components 커뮤니티의 업데이트 및 콘텐츠가 포함되어 있으며, 다른 개발자가 빌드한 오픈소스 구성요소 및 구성요소 모음에 관한 문서를 표시합니다.
Google의 Polymer와 같은 라이브러리를 사용하여 첫 번째 요소를 빌드하거나 하위 수준 Web Component API를 직접 사용할 수 있습니다. 그런 다음 webcomponents.org에 요소를 게시합니다.
즐겁게 구성화하세요.