가짜 뉴스: 웹 구성 요소에 대한 6가지 잘못된 주장

6 웹 구성 요소에 대한 잘못된 주장

Web Components aren't supported by browsers

Web Components can't be used in JavaScript Frameworks and Libraries

Web Components are dead

Web Components cannot accept complex data

You are forced to use Shadow DOM

Web Components are Google Technology

작성자 정보

Stefan은 10년 이상의 경력을 가진 JavaScript 웹 개발자입니다. 그는 스포츠를 좋아하고 책을 읽고 가끔 비행기에서 뛰어내립니다(낙하산을 타고).

☞ 이 글이 마음에 드셨다면 스테판by buying him a coffee ❤️을 응원해주세요.

1. 웹 구성 요소는 브라우저에서 지원되지 않습니다.

이 스크린샷은 WebComponents.org에서 2021년 5월 20일에 찍은 것이며 IE11 및 Safari을 제외한 대부분의 브라우저는 웹 구성 요소를 완벽하게 지원합니다.

2. 웹 구성 요소는 JavaScript 프레임워크 및 라이브러리에서 사용할 수 없습니다.

Angular 및 VueJs와 같은 프레임워크 및 라이브러리의 웹 구성 요소에 대한 지원은 훌륭하고 지속적으로 증가하고 있습니다! Custom Elements Everywhere을 살짝 살펴보면 사용자 정의 요소가 거의 모든 인기 있는 프레임워크 및 라이브러리에서 완벽하게 지원된다는 것을 알 수 있습니다. 유일한 경고는 React입니다. 웹 구성 요소를 지원하지만 not entirely .

3. 웹 구성 요소가 죽었습니다.

많은 사람들은 웹 구성 요소가 죽었고 완전히 지원되지 않으며 그것이 무엇이든 주류 개발에서 결코 자리를 찾을 수 없을 것이라고 주장합니다.

그러나 사실은 그 반대입니다. 맞춤 요소는 그 어느 때보다 인기가 높습니다! 이상10 percent of all page loads in Google Chrome은 웹 구성 요소를 포함하는 페이지입니다.

그 외에도 Mc Donalds, Apple, GitHub, Twitter, Google, Salesforce, ING 및 SAP와 같은 회사는 공개용 애플리케이션 모두에 내부 도구로 웹 구성 요소를 사용하고 있습니다.

브라우저 지원과 JavaScript 프레임워크 지원이 번성하고 있습니다. 나는 우리가 안전하게 말할 수 있다고 생각합니다. 웹 구성 요소는 결코 살아 있지 않습니다!

4. 웹 컴포넌트는 복잡한 데이터를 수용할 수 없습니다.

이 아이디어는 DOM과 그 내부 작동에 대한 근본적인 오해에서 비롯됩니다. 네 가지 오해는 다음과 같습니다.

사용자 정의 요소는 HTML 요소입니다.

HTML 요소에는 속성이 없습니다. 속성만.

속성은 문자열만 될 수 있습니다.

웹 구성 요소는 속성의 문자열만 허용할 수 있습니다.

Custom Elements는 실제로 HTML Elements이지만 DOM 노드이기도 하므로 JavaScript와 DOM을 사용하여 복잡한 데이터를 속성으로 받아들입니다.

5. Shadow DOM을 사용해야 합니다.

Shadow DOM 없이 커스텀 요소를 사용한 적이 없습니까? 다시 생각 해봐. GitHub 으로 이동하여 개발자 콘솔을 열고 다음 코드를 붙여넣습니다.

const isCustomElement = ({ tagName }) => tagName.includes(`-`);
const usesShadowDom = ({ shadowRoot }) => !!shadowRoot;
const allCustomElements = [...document.querySelectorAll(`*`)].filter(
  isCustomElement
);
console.log(`All Custom Elements: ${allCustomElements}`);
console.log(
  `All Custom Elements w/ Shadow DOM: ${allCustomElements.filter(
    usesShadowDom
  )}`
);

Shadow DOM is extremely powerful , 구성 요소를 캡슐화하고 CSS 및 JavaScript가 유출되는 것을 방지하지만 완전히 선택 사항이기 때문입니다. 다음은 완벽하게 작동하는 간단하고 그림자가 없는 예입니다.

class ElementWithoutShadowDom extends HTMLElement {
  constructor() {
    super().innerHTML = `<div>A Custom Element without Shadow DOM</div>`;
  }
}

customElements.define(`no-shadow`, ElementWithoutShadowDOM);

6. 웹 구성 요소는 Google 기술입니다.

웹 구성 요소 사양은 여러 기여자 및 이해 관계자가 있는 개방형 표준입니다.

예를 들어:

Microsoft에서 HTML Module proposal을 선택했습니다.

HTML Template Instantiation은 Apple에서 제안한 것입니다.

IDE standardization for Web Components initiative은 Visual Studio Code(VSCode) 팀이 이끌었습니다.

마지막 생각들

웹 구성 요소에 대한 잘못된 주장이 많이 있으며 오늘 우리는 그 중 6개를 폭로했습니다. (거의 모든) 브라우저, 주요 JavaScript 프레임워크 및 라이브러리, (대형 기술) 회사의 지원으로 그 인기가 날로 높아지고 있습니다. 사용하지 말아야 할 이유가 없습니다.

이 완전히 고유하고 상호 운용 가능하며 유연하고 재사용 가능한 기술을 곧 사용해 보시기 바랍니다!