웹 컴포넌트는 브라우저 간 지원을 얻고 있고, 커뮤니티는 급격히 성장하고 있으며, 필요한 컴포넌트를 정확하게 찾을 수 있는 새로운 웹 컴포넌트 카탈로그가 있습니다.
여러 프로젝트에서 쉽게 사용하거나 다른 개발자가 사용하는 자바스크립트 프레임워크와 관계없이 다른 개발자와 공유할 수 있는, 자체 포함된 자체 포함된 자바스크립트 구성요소를 빌드하고 싶었던 적이 있으신가요? 웹 구성 요소가 도움이 될 수 있습니다.
웹 구성요소는 고유한 HTML 요소를 만들 수 있는 새로운 웹 플랫폼 기능 집합입니다. 각각의 새로운 맞춤 요소에는 <my-button>와 같은 맞춤 태그가 있을 수 있고 기본 제공 요소의 모든 장점이 있습니다. 맞춤 요소에는 속성과 메서드를 포함하고, 이벤트를 실행하고, 이벤트에 응답할 수 있으며, 자체적인 디자인과 분위기를 연출할 캡슐화된 스타일과 DOM 트리도 있습니다.
웹 구성요소는 플랫폼 기반의 하위 수준 구성요소 모델을 제공하므로 특수 버튼부터 날짜 선택기와 같은 복잡한 뷰까지 재사용 가능한 요소를 빌드하고 공유할 수 있습니다. 웹 구성요소는 강력한 캡슐화 프리미티브가 포함된 플랫폼 API로 빌드되므로 이러한 구성요소를 표준 DOM 요소인 것처럼 다른 JavaScript 라이브러리 또는 프레임워크 내에서 사용할 수도 있습니다.
웹 구성요소 사양의 초기 버전인 v0이 Chrome 33에 출시되기 전에 웹 구성요소에 대해 들어보셨을 것입니다.
오늘날 브라우저 공급업체 간의 광범위한 공동작업 덕분에 차세대 웹 구성요소 사양인 v1이 폭넓게 지원되고 있습니다. Chrome은 Chrome 53 및 Chrome 54부터 웹 구성요소를 구성하는 두 가지 주요 사양인 Shadow DOM과 맞춤 요소를 지원합니다. Safari는 Safari 10의 Shadow DOM v1 지원을 시작했으며 WebKit의 맞춤 요소 v1 구현을 완료했습니다. Firefox는 현재 Shadow DOM과 맞춤 요소 v1을 개발하고 있으며 Shadow DOM과 맞춤 요소 모두 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 사이트에는 웹 구성요소 사양, 웹 구성요소 커뮤니티의 업데이트 및 콘텐츠 관련 정보가 포함되어 있으며 다른 개발자가 만든 오픈소스 요소 및 요소 모음에 관한 문서가 표시됩니다.
Google의 Polymer와 같은 라이브러리를 사용하여 첫 번째 요소 빌드를 시작하거나 하위 수준의 Web Component API를 직접 사용할 수도 있습니다. 그런 다음 webcomponents.org에 요소를 게시합니다.
즐거운 시간되시길 바랍니다.