What Are Web Components?

When a developer first views a website, they typically see an HTML template that often looks something like this: <div><button onclick="doSomethingFunction">Click me</button></div>) + JavaScript + CSS

But working with HTML and JS can be hard. It requires a lot of time, effort and lines of code that are also difficult to maintain. Especially when you want to do complex things like building  web grid components, web components charts and graphs, and more.

That's why TypeScript (or JavaScript) and various web application frameworks have emerged. They have many predefined features that are ready to use when working on a new project. But then comes the next challenge – the learning curve. You must master specific programming skills in order to be able to use frameworks like Angular, React, jQuery, Blazor and develop the components you need.

Now these things can be done without a framework or having to understand the complexity behind all modules, coding languages, and integrations thanks to Web Components.

Here's what you will learn in this post.

• What are Web Components?
• Why should you use Web Components?
• Are frameworks going down the rabbit hole?

What Are Web Components?

Hello World. My Name Is Components… Web Components

Web Components is a browser-native HTML and JavaScript technology used for creating custom UI elements such as buttons, widgets, and more or to build entire screens, pages, and apps. What makes it great is the encapsulated functionality that is distinct from the rest of the code and also the reusability of the <html-element>. This modularity allows you to utilize individual elements anywhere in your project, build more than just <hello-world></hello-world> quickly and easily, and reduce development time.

But do not confuse Web Components with a framework or a rendering library because Web Components doesn’t fall into these technical categories. It’s more appropriate to see it as:

• Low Level Browser APIs
• Standard Component Interfaces
• Framework-agnostic rich user experience

Considered relatively new and  first introduced by Alex Russell at the Fronteers Conference in 2011, the concept of standard Web Components has evolved significantly in the last decade, providing developers (especially newbies) a way to simplify how they create modern-day web applications. When talking about Web Components, we are really talking about three different specifications it is based on:

Custom elements - a set of JavaScript APIs that allow the creation of new HTML tags, improve existing ones, define custom elements behavior, and expand components built by other programmers so they best match the UI. Custom elements have their own semantics and markup and exist without third-party frameworks.

Shadow DOM - separates CSS and JavaScript and provides encapsulation. This way you can isolate the markup structure, style, and behavior of a custom element from other code on the page, making sure that different parts won’t clash and simultaneously keeping the code clean. With the Shadow DOM API you can also attach a hidden DOM to a given element.

HTML templates – used in the custom elements, the <template> lets you create markup templates with dynamic content which are not rendered right away at a page load. These can be further reused multiple times and are called upon during runtime. There is also the so called <slot> which facilitates how you manage the content of an element.

Why Use Web Components?

Web Components is production-ready but it continues to evolve and progress, so developers can get even more advantages in the future. But what are the benefits of Web Components? Here are some thoughts to keep in mind if you are still wondering how exactly they can enhance modern web development.

• Empowers modularization and is interoperable

Using Web Components, you take advantage of small, reusable, modular elements that easily fit into web apps and reduce development time. As it is cross-sharable and isn’t dependent on any technology stack, Web Components can be applied across many projects written in different frameworks. For instance, this lets you switch from your Angular to React project.

• Rendering UI happens with less JavaScript

All parts of the Web Components work in the browser – from custom elements to slots. Which is super useful especially for static site development that requires almost no amount of tooling and can be easily built with just spec.

• Uphill battle when it comes to learning is minimized

Less experienced developers can start writing code without having to learn the entire JavaScript library. Web Components steps in to provide a spec that everyone can understand and apply in practice.

• Accessibility (a11y) of course

HTML Web Components is accessible because the custom built-in elements can extend native HTML elements (input, select, button). Doing so, they inherit all the functionalities and characteristics.

• Delivers platform-independence

Developed using HTML, CSS, and JavaScript, Web Components has no problem running on different browsers and there is a satisfying level of browser support with stable APIs. Web Components is already added to Chrome and Safari (in 2016), Firefox (in 2018), and Edge (in 2020.) Backward compatibility with older browsers like Microsoft Edge and Internet Explorer 11 is also achieved using JavaScript-based polyfills. What’s more, any custom component and widget built on the Web Component standards can be used with all JavaScript libraries or frameworks working with HTML.

• Offers encapsulation mechanism

The Shadow DOM of Web Components provides an encapsulation mechanism. It can separate the style, script, and the HTML markup, so the content of the component cannot be damaged in any way by external documents. Which makes modular frontend development easy and fast.

There are great Web Components examples in the form of a Web Components library or web component frameworks created by some of the biggest tech giants and industry names. We know Microsoft’s FAST components, Lightning Web Components developed by Salesforce, and of course, the Polymer project by Google.

Are Frameworks Going Down the Rabbit Hole?

Chasing Something That Is Far More Intriguing and Simpler… like Web Components?

Angular, React, jQuery, and other frameworks are much more mature technologies. They have been present on the market for many years now, whereas HTML Web Components are seen as an emerging trend. But how can we compare them and how do developers understand the Web Components vs Angular and Web Components vs React battle?

We first need to start by stating that Web Components and Angular or React are built with the idea to solve different problems. While contemporary frameworks provide rich libraries keeping the DOM synchronized with your data, Web Components allows for encapsulation and delivers interoperable elements which can be used across different projects and platforms.

Frameworks have a steep learning curve. You need to gain certain technical skills in order to use them properly and you must update your code, whereas Web Components introduces a modular approach to a single programming language.

A component that is developed for a given framework hardly ever fits another. With the frameworks we know, you have to add libraries separately. HTML Web Components, on the other hand, utilizes web APIs built into the browser and are framework agnostic.

Using Web Components poses some styling difficulties as it lacks features such as data-binding and state management which are available with popular app development frameworks.

The ecosystems of React, Angular and the rest of the widely adopted app development platforms are impressively powerful. They are supported by large communities and are based on constantly evolving tools and libraries.

Certainly, each has its strengths and weaknesses. The good news is that the future for both frameworks and Web Components is bright. They will keep being updated and developed further so frontend development becomes more and more streamlined and efficient.

With the idea to deliver cutting-edge development tools for modern web apps, we've shipped the Ignite UI for Web Components library. Using it, you can build advanced web applications that benefit from using dependency-free components in a future-proof app dev strategy. 

If you also have ideas about new features we should add to our Web Components, you can let us know by posting your requests and suggestions on our Product Ideas website.