웹 구성 요소와 사용자 지정 요소의 차이점은 무엇입니까?

"웹 구성 요소"와 "맞춤 요소"는 종종 섞여 있으며,이 질문의 제목에 대한 웹 검색은 아직 명확하지 않습니다. 고쳐 봅시다.

사용자 정의 요소 는 Shadow DOM, 템플릿 및 HTML 가져 오기와 함께 웹 구성 요소 표준 의 사양 부분입니다 .

사양에서 :

사용자 정의 요소는 제작자가 고유의 완전한 기능을 갖춘 DOM 요소를 구축 할 수있는 방법을 제공합니다. 비록 저자가 문서에서 비표준 요소를 항상 사용할 수 있지만, 스크립팅이나 이와 유사한 방식으로 사실 이후에 응용 프로그램 별 동작이 추가되는 경우도 있지만 이러한 요소는 역사적으로 부적합하고 기능적이지 않았습니다. 사용자 정의 요소를 정의함으로써 작성자는 구문 분석기에 요소를 올바르게 구성하는 방법과 해당 클래스의 요소가 변경에 어떻게 반응해야하는지 알 수 있습니다.

역사

사양은 이제 v1에 있습니다. 이전 버전, V0는 지원했다 크롬 33부터 , 그리고 사용, 다른 API를했다 document.registerElement- 어떤 되어 지금은 사용되지 않습니다 .

용법

사용자 정의 요소는 자율적이거나 (새 요소를 처음부터 새로 작성 ( HTMLElement 확장 )) 기존 HTML 요소 (예 : HTMLButtonElement)를 사용자 정의 할 수 있습니다.

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

customElements.define()호출에 대한 두 번째 매개 변수 는 요소의 동작을 구현하는 클래스의 이름입니다. 자율 요소 및 사용자 정의 내장 요소 에 대한 스펙의 예제를 참조하십시오 .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

사용자 정의 요소는 일부 최신 브라우저 에서 기본적으로 지원 되며 Safari 7+ 및 IE11로 돌아가는 이전 브라우저에 대해 폴리 필 할 수 있습니다 . v1 polyfill 도 참조하십시오 .

템플릿과 그림자 DOM

사용자 정의 요소에서 템플릿 및 그림자 DOM을 사용하면 요소를보다 쉽게 ​​처리하고 재사용 할 수 있습니다.

템플릿을 사용하면 HTML을 사용하여 사용자 정의 요소의 구조를 선언 할 수 있습니다.

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Shadow DOM을 사용하면 컨텐츠의 스타일, ID 및 클래스의 범위를 지정할 수 있습니다. 이렇게하면 CSS 외부에서 사용자 정의 요소의 내부에 대한 액세스 또는 CSS 출혈이 방지됩니다.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

더 알아보기

Google 개발자 기사 :

• 맞춤 요소 v1 : 재사용 가능한 웹 구성 요소
• Shadow DOM : 자체 포함 된 웹 구성 요소