Fake news: 6 false claims about Web Components

6 False claims about Web Components

1. Web Components aren't supported by browsers
2. Web Components can't be used in JavaScript Frameworks and Libraries
3. Web Components are dead
4. Web Components cannot accept complex data
5. You are forced to use Shadow DOM
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 ❤️.

1. Web Components aren't supported by browsers

This screenshot was taken on May 20, 2021, from WebComponents.org, and most browsers, except for IE11 and 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 Custom Elements Everywhere 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.

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 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 GitHub, open the Developer's console and paste the following code:

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, 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:

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 HTML Module proposal was picked up by Microsoft.
• The HTML Template Instantiation was proposed by Apple.
• The IDE standardization for Web Components initiative 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!

Comments

[MagicD]

Hi! Love your post!
I've appreciated web components for a long time (used StencilJs a lot).

There are indeed lots of misconceptions going round with this. All the cool kids say it is dead concept, without having any experience on the subject at all.

... let them struggle!
Meanwhile I ship vanilla, angular, vue, react, <...insert your framework of the day here> with consistant UI using web standards