프론트 엔드 개발은 빠른 속도로 진행됩니다. 

이것은 한때 상당히 단순한 기술 스택의 상태를 연상시키는 수많은 기사, 튜토리얼 및 트위터 스레드에 의해 분명해집니다. 이 기사에서는 웹 구성 요소가 복잡한 프레임 워크 나 빌드 단계없이 고품질 사용자 환경을 제공하고 쓸모없는 위험을 초래하지 않는 훌륭한 도구 인 이유에 대해 설명합니다. 

이 5 부 시리즈의 다음 기사에서는 각 사양에 대해 자세히 설명합니다.

https://css-tricks.com/an-introduction-to-web-components/ 

이 시리즈는 HTML, CSS 및 JavaScript에 대한 기본 이해를 가정합니다. 

이러한 영역 중 하나에서 약하다고 느끼더라도 걱정하지 마십시오. 

사용자 지정 요소를 작성하면 실제로 프런트 엔드 개발에서 많은 복잡성을 단순화 할 수 있습니다.

어쨌든 웹 구성 요소 란 무엇입니까? 

웹 구성 요소는 함께 사용되는 세 가지 기술로 구성됩니다.

1. Custom Elements. 간단히 말해서 자바 스크립트 API 세트로 ​​만든 맞춤 템플릿, 비헤이비어 및 태그 이름 (예 : <one-dialog>)이 있는 완전한 HTML 요소입니다. 맞춤 요소는 HTML Living Standard 사양에 정의되어 있습니다.
2. Shadow DOM. <iframe>과 거의 비슷하게 CSS와 JavaScript를 분리 할 수 ​​있습니다. 이것은 Living Standard DOM 사양에 정의되어 있습니다.
3. HTML templates. 호출 할 때까지 렌더링 되지 않는 HTML의 사용자 정의 템플릿. <template> 태그는 HTML Living Standard 사양에 정의되어 있습니다.

이것이 Web Components 사양을 구성하는 것입니다.

HTML 모듈은 스택에서 네 번째 기술 일 가능성이 높지만 4 대 브라우저에서는 아직 구현되지 않았습니다. Chrome 팀은 향후 릴리스에서 이를 구현하겠다고 발표했습니다. 

웹 구성 요소는 일반적으로 Microsoft Edge 및 Internet Explorer 11을 제외한 모든 주요 브라우저에서 사용할 수 있지만 이러한 빈 공간을 채우기 위해 폴리 필이 존재합니다.

이러한 용어 중 하나를 웹 구성 요소라고 하면 용어 자체가 약간 오버로드 되기 때문에 기술적으로 정확합니다. 결과적으로, 각 기술은 독립적으로 사용되거나 다른 기술과 결합하여 사용될 수 있습니다. 즉, 상호 배타적이지 않습니다.

처음 세 가지를 각각 살펴 보겠습니다. 이 시리즈의 다른 기사에서 자세히 살펴볼 것입니다.

맞춤 요소 

이름에서 알 수 있듯이 사용자 정의 요소는 <div>, <section> 또는 <article>과 같은 HTML 요소이지만 브라우저 API를 통해 정의 된 이름을 지정할 수 있습니다. 

사용자 정의 요소는 <news-slider> 또는 <bacon-cheeseburger>와 같이 항상 대시가 있다는 점을 제외하고 표준 HTML 요소 (괄호 안의 이름)와 같습니다. 앞으로 브라우저 공급 업체는 충돌을 방지하기 위해 이름에 대시가 포함 된 새로운 내장 요소를 만들지 않기로 약속했습니다.

사용자 지정 요소에는 자체 의미, 동작, 마크 업이 포함되어 있으며 프레임 워크와 브라우저에서 공유 할 수 있습니다.

class MyComponent extends HTMLElement { connectedCallback() { this.innerHTML = `<h1>Hello world</h1>`; } } customElements.define('my-component', MyComponent); 

https://codepen.io/calebdwilliams/pen/MLQGZx 

이 예에서는 고유 한 HTML 요소 인 <my-component>를 정의합니다. 

물론 많은 작업을 수행하지는 않지만 이것이 사용자 지정 요소의 기본 구성 요소입니다. 

브라우저에 등록하려면 모든 사용자 정의 요소가 HTMLElement를 확장해야 합니다.

사용자 지정 요소는 타사 프레임 워크없이 존재하며 브라우저 공급 업체는 사양의 지속적인 호환성을 위해 최선을 다하고 있지만 사양에 따라 작성된 구성 요소가 API 변경을 중단하지 않도록 보장합니다. 

또한 이러한 구성 요소는 일반적으로 Angular, React, Vue 등 최소한의 노력으로 오늘날 가장 인기 있는 프레임 워크와 함께 기본적으로 사용할 수 있습니다.

Shadow DOM 

섀도우 DOM은 캡슐화 된 버전의 DOM입니다. 이를 통해 작성자는 CSS 선택기로 사용할 수 있는 항목 및 이와 관련된 스타일을 포함하여 DOM 단편을 서로 효과적으로 분리 할 수 ​​있습니다. 

일반적으로 문서 범위 내의 모든 내용을 라이트 DOM이라고 하며 그림자 루트 내부의 모든 것을 그림자 DOM이라고 합니다.

light DOM을 사용하는 경우 document.querySelector('selector')를 사용하거나 element.querySelector('selector')를 사용하여 요소의 하위를 타겟팅 하여 요소를 선택할 수 있습니다. 

같은 방식으로 shadowRoot.querySelector를 호출하여 섀도우 루트의 자식을 대상으로 지정할 수 있습니다. 여기서 shadowRoot는 문서 조각에 대한 참조입니다. 

차이점은 섀도우 루트의 자식을 라이트 DOM에서 선택할 수 없다는 것입니다. 예를 들어, 내부에 <button>이 있는 섀도우 루트가 있는 경우 shadowRoot.querySelector('button')를 호출하면 버튼이 반환 되지만 문서의 쿼리 선택기 호출은 해당 요소가 다른 요소에 속하기 때문에 해당 요소를 반환하지 않습니다. DocumentOrShadowRoot 인스턴스. 스타일 선택기는 같은 방식으로 작동합니다.

이와 관련하여 섀도우 DOM은 <iframe>과 비슷하게 작동하여 문서의 나머지 부분에서 내용이 잘립니다. 그러나 섀도우 루트를 만들 때 여전히 페이지의 해당 부분을 완전히 제어 할 수 있지만 상황에 따라 범위가 결정됩니다. 이것을 캡슐화 라고 합니다.

동일한 ID를 재사용하거나 CSS-in-JS 도구 또는 CSS 이름 지정 전략 (BEM과 같은)에 의존하는 구성 요소를 작성한 경우 shadow DOM은 개발자 경험을 향상 시킬 수 있습니다.

다음 시나리오를 상상해보십시오.

<div> <div id="example"> <!-- Pseudo-code used to designate a shadow root --> <#shadow-root> <style> button { background: tomato; color: white; } </style> <button id="button">This will use the CSS background tomato</button> </#shadow-root> </div> <button id="button">Not tomato</button> </div> 

<# shadow-root>의 의사 코드 (HTML 요소가 없는 그림자 경계를 구분하기 위해 여기에 사용됨) 외에 HTML은 완전히 유효합니다. 위의 노드에 섀도우 루트를 연결하려면 다음과 같이 실행하십시오.

const shadowRoot = document.getElementById('example').attachShadow({ mode: 'open' }); shadowRoot.innerHTML = `<style> button { color: tomato; } </style> <button id="button">This will use the CSS color tomato <slot></slot></button>`; 

섀도우 루트는 <slot> 요소를 사용하여 포함하는 문서의 내용을 포함 할 수도 있습니다. 슬롯을 사용하면 섀도우 루트의 지정된 지점에서 외부 문서의 사용자 컨텐츠가 삭제됩니다.

https://codepen.io/calebdwilliams/pen/rRNJPJ 

HTML 템플릿 

적절하게 이름이 지정된 HTML <template> 요소를 사용하면 즉시 렌더링 되지는 않지만 나중에 사용할 수 있는 일반 HTML 흐름 내에 재사용 가능한 코드 템플릿을 스탬프 처리 할 수 ​​있습니다.

<template id="book-template"> <li><span class="title"></span> &mdash; <span class="author"></span></li> </template> <ul id="books"></ul> 

위의 예제는 스크립트가 템플릿을 사용하고 코드를 인스턴스화 한 후 브라우저에게 템플릿으로 수행 할 작업을 지시 할 때까지 콘텐츠를 렌더링 하지 않습니다.

const fragment = document.getElementById('book-template'); const books = [ { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }, { title: 'A Farewell to Arms', author: 'Ernest Hemingway' }, { title: 'Catch 22', author: 'Joseph Heller' } ]; books.forEach(book => { // Create an instance of the template content const instance = document.importNode(fragment.content, true); // Add relevant content to the template instance.querySelector('.title').innerHTML = book.title; instance.querySelector('.author').innerHTML = book.author; // Append the instance ot the DOM document.getElementById('books').appendChild(instance); }); 

이 예제는 다른 웹 구성 요소 기술 없이 템플리트 (<template id = "book-template">)를 작성하여 스택의 세 가지 기술을 독립적으로 또는 집합 적으로 사용할 수 있음을 다시 보여줍니다. 

표면 상으로, 템플릿 API를 사용하는 서비스 소비자는 나중에 만들 수 있는 모양이나 구조의 템플릿을 작성할 수 있습니다. 사이트의 다른 페이지는 동일한 서비스를 사용할 수 있지만 템플릿을 다음과 같이 구성하십시오.

<template id="book-template"> <li><span class="author"></span>'s classic novel <span class="title"></span></li> </template> <ul id="books"></ul> 

https://codepen.io/calebdwilliams/pen/LqQmXN 

이제 웹 구성 요소에 대한 소개를 마무리했습니다. 

웹 개발이 점점 더 복잡해짐에 따라, 우리와 같은 개발자는 계속 발전하고 있는 웹 플랫폼 자체에 대해 점점 더 많은 개발을 연기하기 시작하는 것이 합리적 일 것입니다. 웹 구성 요소 사양은 개발자가 진화함에 따라 요구 사항이 계속 증가하고 발전하는 하위 수준 API 집합입니다.

다음 기사에서는 HTML 템플릿 부분을 자세히 살펴볼 것입니다. 그런 다음 사용자 지정 요소 및 섀도 DOM에 대해 설명합니다. 마지막으로, 오늘날 인기 있는 라이브러리 및 프레임 워크와의 고급 툴링 및 통합을 검토하여 이 모든 것을 마무리합니다.