Fake news: 6 false claims about Web Components
Tags: webdev, programming, javascript, webcomponents
Published: 2021-06-01 13:57:58

## 6 False claims about Web Components

1. [Web Components aren't supported by browsers](#1-web-components-arent-supported-by-browsers)
2. [Web Components can't be used in JavaScript Frameworks and Libraries](#2-web-components-cant-be-used-in-javascript-frameworks-and-libraries)
3. [Web Components are dead](#3-web-components-are-dead)
4. [Web Components cannot accept complex data](#4-web-components-cannot-accept-complex-data)
5. [You are forced to use Shadow DOM](#5-you-are-forced-to-use-shadow-dom)
6. [Web Components are Google Technology](#6-web-components-are-google-technology)

## About the author
Stefan is a JavaScript Web Developer with more than 10 years of experience. He loves to play sports, read books and occasionally jump out of planes (with a parachute that is).

☞ If you like this article, please support Stefan [by buying him a coffee](https://www.buymeacoffee.com/stefannhs) ❤️.

## 1. Web Components aren't supported by browsers

![Most browsers support Web Components completely](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ddgv8m5rnhnqqs9v9iv.png)

This screenshot was taken on May 20, 2021, from <a href="https://www.webcomponents.org" target="_blank" rel="noopener noreferrer">WebComponents.org</a>, and most browsers, except for [IE11](https://nhswd.com/blog/web-components-101-what-are-web-components/#internet-explorer) and [Safari](https://nhswd.com/blog/web-components-101-what-are-web-components/#safari), offer full support for Web Components.

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

The support for Web Components in frameworks and libraries like Angular and VueJs is excellent and ever-growing! Just a quick peek at <a href="https://custom-elements-everywhere.com" target="_blank" rel="noopener noreferrer" title="A series of test suites against JavaScript frameworks to verify Custom Elements support">Custom Elements Everywhere</a> tells you that Custom Elements are fully supported by almost every popular framework and library. The only caveat is React. It does support Web Components, but [not entirely](https://nhswd.com/blog/web-components-101-what-are-web-components/#web-components-and-framework-support).

## 3. Web Components are dead

Many people claim that Web Components are dead, not supported completely and will never find a place in _mainstream development_, whatever that may be.

But, in fact, the opposite is true. Custom Elements are more popular than ever! More than [10 percent of all page loads in Google Chrome](https://nhswd.com/blog/web-components-101-what-are-web-components) are pages that contain Web Components.

Besides that, companies like Mc Donalds, Apple, GitHub, Twitter, Google, Salesforce, ING & SAP are using Web Components for both their public-facing applications as internal tools.

Browser support is flourishing as well as JavaScript framework support. I think that we safely could say: Web Components have never been so alive!

## 4. Web Components cannot accept complex data

This idea originates from a fundamental misunderstanding of the DOM and its inner workings. Four misconceptions are:

1. Custom Elements are HTML Elements.
2. HTML Elements don't have properties; only attributes.
3. Attributes can only be strings.
4. Web Components can only accept strings in attributes.

Custom Elements are indeed HTML Elements but are **DOM nodes** as well, and because of that, accept **complex data** as properties, using JavaScript and the DOM.

## 5. You are forced to use Shadow DOM

Never used Custom Elements without the Shadow DOM? Think again. Just go to <a href="https://github.com" target="_blank" rel="noopener noreferrer" title="GitHub.com">GitHub</a>, open the Developer's console and paste the following code:

```js
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](https://nhswd.com/blog/web-components-101-what-are-web-components/#3-shadow-dom), because it encapsulates your components and prevents CSS and JavaScript from leaking in and out, but is completely optional. Here's a simple, and shadowless, example that works perfectly:

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

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

## 6. Web Components are Google Technology

The Web Components specs are **open standards** with multiple contributors, and stakeholders.

For example:

- The <a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/html-modules-proposal.md" target="_blank" rel="noopener noreferrer" title="The HTML Modules proposal by MS">HTML Module proposal</a> was picked up by Microsoft.
- The <a href="https://github.com/WICG/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md" target="_blank" rel="noopener noreferrer" title="The HTML Template instantiation by Apple">HTML Template Instantiation</a> was proposed by Apple.
- The <a href="https://github.com/WICG/webcomponents/issues/776" target="_blank" rel="noopener noreferrer" title="IDE standardization for Custom Elements by the VSCode Team">IDE standardization for Web Components initiative</a> was lead by the Visual Studio Code (VSCode) Team.

## Final thoughts

There are lots of false claims about Web Components, and today, we've debunked six of them. With support from (almost all) browsers, major JavaScript Frameworks and Libraries, and (big tech) companies, its popularity is growing every day. There is no reason why you shouldn't use it.

I hope you'll try this fully native, interoperable, flexible, and reusable technology soon!