웹 컴포넌트

Web Components
HTML 컴포넌트와 혼동하지 마십시오.

웹 컴포넌트는 개별 HTML 요소의 캡슐화와 상호 운용성을 가능하게[1] 하는 웹의 표준 컴포넌트 모델을 제공하는 기능 세트입니다.

작성에 사용되는 주요 테크놀로지는 다음과 같습니다.[2]

  • 커스텀 요소: 새로운 HTML 요소를 정의하는 API
  • Shadow DOM: 캡슐화된 DOM 및 스타일링, 구성 포함
  • HTML 템플릿: 렌더링되지 않지만 JavaScript를 통해[3] 인스턴스화될 때까지 저장되는 HTML 조각

특징들

커스텀 요소

커스텀 요소에는 Autonomous Custom 요소와 Customized Built-in 요소의 2가지 부분이 있습니다.Autonomous Custom Elements는 네이티브 HTML 요소에서 완전히 분리된HTML 요소로 기본적으로 Custom Elements API를 사용하여 구축됩니다.커스터마이즈된 빌트인 요소는 네이티브 HTML 요소를 기반으로 구축되어 기능을 [4]재사용하는 요소입니다.

섀도우 DOM

Shadow DOM은 웹 브라우저가 기본 문서 DOM 트리에 DOM 요소를 넣지 않고 렌더링할 수 있는 기능입니다.이로 인해 개발자와 브라우저 사이에 장벽이 생깁니다.개발자는 네스트된 요소에서와 같은 방식으로 섀도 DOM에 액세스할 수 없습니다.또한 브라우저는 네스트된 요소에서와 같은 방식으로 코드를 렌더링 및 수정할 수 있습니다.특정 요소의 섀도 DOM 내에서 CSS 스코프를 적용하면 영향을 미치지 않는 CSS 스타일이 누출되어 영향을 미칠 위험 없이 HTML 요소를 캡슐화할 수 있습니다.이러한 요소는 HTML 및 CSS에 관해 캡슐화되어 있지만 문서 [5][6]내의 다른 요소에 의해 픽업될 수 있는 이벤트를 발생시킬 수 있습니다.

요소의 범위 하위 트리를 그림자 트리라고 합니다.그림자 트리가 붙어 있는 요소를 그림자 [6]호스트라고 합니다.

섀도 DOM은 리터럴 요소로 연결하거나 스크립트를 통해 항상 기존 요소에 연결해야 합니다.JavaScript에서 섀도 DOM은 다음을 사용하여 요소에 연결됩니다.Element.attachShadow()를 클릭합니다.[7]

HTML 템플릿

HTML 템플릿은 스탬프가 찍힌 HTML 덩어리를 자유롭게 삽입하는 방법입니다.HTML 템플릿의 구문은 다음과 같습니다.

< >html>     < >템플릿>         < >h1><슬롯 이름.="실패"</>슬롯</>h1>         < >p><슬롯 이름.="설명"</>슬롯</>p>     </템플릿> </html>

스크립트는 실행되지 않으며 템플릿 내의 리소스는 템플릿이 [8]스탬프 아웃될 때까지 가져오지 않습니다.

브라우저 지원

웹 구성요소는 모든 주요 [9]브라우저의 현재 버전에서 지원됩니다.

이전 브라우저와의 하위 호환성은 JavaScript 기반 폴리필을 사용하여 구현됩니다.

라이브러리

사용자 정의 요소를 작성할 때 추상화 수준을 높이기 위해 웹 구성요소를 기반으로 하는 라이브러리가 많이 있습니다.이러한 라이브러리에는 X-Tag, Slim.js, Polymer, Bosonic, Riot.js, Salesforce Lightning Web 컴포넌트, Data Forms 등이 있습니다.JS.

위 목록에서 Bosonic, Polmer 및 DataFormsJs는 무료로 사용할 수 있는 기성 구성 요소를 제공합니다.이들 컴포넌트는 모두 오픈 웹 [10][clarification needed]테크놀로지를 기반으로 구축되어 있기 때문에 서로 교환하여 사용할 수 있습니다.

지역 사회

웹 컴포넌트 생태계를 위한 수많은 커뮤니티 노력이 있습니다.WebComponents.org에서는 기존의[11] 웹 컴포넌트를 검색할 수 있는 인터페이스를 제공하고 있습니다.Custom[12] Elements Everywhere에서는 일반적인 프런트 엔드 프레임워크가 웹 컴포넌트 표준에 적합하며 사용할 준비가 되어 있는지 여부를 검증하고 보류 중인 버그와 사용 가능한 회피책을 제공합니다.또한 Vaadin[13] Tutorials에는 이러한 회피책을 예제 데모 앱 및 이와 유사한 관련 항목에서 효율적으로 사용하는 방법을 보여주는 전용 섹션이 있습니다.

역사

Web Components는 Fronteers Conference 2011에서 Alex Russell에 의해 [14]처음 소개되었습니다.

웹 컴포넌트를 기반으로 한 라이브러리인 폴리머는 2013년에 [15]구글에 의해 출시되었습니다.

Firefox 63은 기본적으로 웹 구성 요소 지원을 활성화하고 2018년에 이를 [16]지원하도록 개발자 도구를 업데이트했습니다.

레퍼런스

  1. ^ GitHub - w3c/webcomponents: Web Components specifications., World Wide Web Consortium, 2019-01-03, retrieved 2019-01-03
  2. ^ "Web Components". MDN Web Docs. Retrieved 2019-01-03.
  3. ^ "<template>: The Content Template element". MDN Web Docs. Mozilla. Retrieved 2018-07-08.
  4. ^ "Custom Elements". www.w3.org. Retrieved 2016-12-01.
  5. ^ "What the Heck is Shadow DOM?". Dimitri Glazkov. 2011-01-15. Retrieved 2016-12-01.
  6. ^ a b "Shadow DOM v1: Self-Contained Web Components Web Google Developers". Google Developers. Retrieved 2016-12-01.
  7. ^ "Shadow DOM". Mozilla Developer Network. Retrieved 2016-12-01.
  8. ^ Community. "Introduction to the template elements — WebComponents.org". webcomponents.org. Retrieved 2016-12-03.
  9. ^ "webcomponents.org - Discuss & share web components". www.webcomponents.org. Retrieved 2020-07-22.
  10. ^ "Web Components in production use – are we there yet?". vaadin.com. Retrieved 2016-11-21.
  11. ^ "Search available Web Components".
  12. ^ "Validate Front-end Frameworks with Web Components Standard".
  13. ^ "Web Components Tutorials".
  14. ^ "Web Components and Model Driven Views by Alex Russell · Fronteers". fronteers.nl. Retrieved 2016-12-02.
  15. ^ "The state of Web Components ★ Mozilla Hacks – the Web developer blog". hacks.mozilla.org. Retrieved 2016-12-02.
  16. ^ "Developer Tools support for Web Components in Firefox 63".

외부 링크