Lets Build Web Components! Part 8: Mythbusters Edition

So far in this series, we’ve covered the underlying web components standards, the legacy-browser polyfills, and their implementation with vanilla javascript and a wide variety of different helper libraries.
Today, we’re going to review some pernicious myths about web components and their use which seem to have cropped up lately. Many of these misconceptions are understandable, considering how young the technology is, and how the shift from the v0 web components spec to v1 with its wide adoption has changed the landscape considerably, and for the better.
Let’s shine a little light on the web’s own component model and learn how they make development easier and improve the experience of users, developers, and managers.

Myth: Web Components Aren’t Supported By Browsers
Myth: Web Components Can’t Accept Complex Data
Myth: Web Components Have No Way Of Templating
Myth: Web Components Can’t be Server-Side-Rendered
Myth: Web Components are a Proprietary Google Technology
Myth: You Need Polymer to Use Web Components
Myth: You Need to Use HTML Imports
Myth: You Need to Use Shadow DOM
Myth: You Need Frameworks to Write Apps
Myth: You Can’t Use Web Components in Frameworks
Myth: The Web Community Has Moved on From Web Components

Myth: Web Components Aren’t Supported By Browsers

Sometimes a picture is worth 1024 words:

This screenshot was taken from https://webcomponents.org with Firefox version 65.0.1 in February 2019. It shows that all major browsers support web components specifications, with Edge soon-to-deliver support sans-polyfills. (Web Components can also be made to be supported down to IE11, but you shouldn’t do that)

But isn’t the proof of the pudding in the eating… or… the proof of the platform API in the deploying? If web components were not supported, we wouldn’t expect to see them in the wild, and certainly not in use by large teams. However: Twitter, GitHub, dev.to, McDonalds, Salesforce, ING (PDF link), SAP, and many others all use web components in public-facing, core-business pages. In my day job at Forter, we use web components. In fact, in 2018, 10% of all reported Chrome page loads used web components.

Alex Russell
@slightlylate

Was digging into this data last week, and it turns out there isn’t much overlap.10+% of all pageloads in Chrome are use Web Components; one of our most successful features in recent years (for context, CSS Grid is used by ~2.5% of pageloads) twitter.com/abraham/status…

20:36 PM – 23 Jan 2019

Abraham Williams @abrahamPage loads that define custom elements v1 (5%) just surpassed registrations of custom elements v0 (4.5%). #WebComponents https://t.co/LjhSS5d6Ap
https://t.co/rU1kQUQptS https://t.co/dqofSNgcm6

44146

Clearly, web components are not just a potentially-interesting future technology. They are in use, by you and users like you, on the web today.

Myth: Web Components Can’t Accept Complex Data

I’ve seen the claim recently that web components are limited to accepting their data as strings, and therefore can’t take complex objects. This misconception is particularly insidious because, like any good lie, it’s half true. This misguided notion stems from a fundamental misunderstanding of the DOM and how it works.
Here follows a brief review. Feel free to Skip it if you’re OK with DOM vs. HTML / attrs vs. props.

Link: https://dev.to//bennypowers/lets-build-web-components-part-8-mythbusters-edition-3la