The Perks Of Web Components: Perks & Flaws Series – Part 2

In the introduction article to this series, I wrote about the motivation, why to use Web Components. Now we are going to take a closer look at the perks of using them - from a technical and business point of view. If you are interested in all technical features of Web Components, I would recommend a more in-depth article from my colleague.

In diesem Artikel:

The Perks Of Web Components: Perks & Flaws Series – Part 2
Manuel Rauber ist Consultant bei Thinktecture. Er fokussiert sich auf Web Components, Angular, .NET Core & Node.js.

Technical Perks of Web Components

In this section, we are taking a look at the technical perks, which help you as a developer to create, use, maintain, and share your precious Web Components.

Reusability

Web Components rely on the browser’s native component model implementation and not on other frameworks. That makes it easy to reuse the component across multiple applications – either your in-house or external ones. Additionally, every current SPA framework can consume Web Components and, if needed, wrap it into a framework component providing additional services. You can develop your component once and use it everywhere you like.

Semantics

If you think of good old components years ago, you may have seen code similar to this:

				
					<html>
  <head>
      
  </head>
  <body>
    <div id="fancyWidget"></div>
  <script src="https://www.thinktecture.com/core/cache/min/1/f55825a6495bdf0fcc3f0a4b3fe23d0b.js" data-minify="1"></script></body>
</html>
				
			

Taking a look at it, there is literally no semantics. You only have a div element with a specific id on it. However, you don’t know anything about it. It is not visible if that is a component at all, and if so, which one it is. Additionally, without having more documentation, there is no hint about the component’s API. Depending on the component, you may need to include one or several stylesheets as well.

At runtime, the fancyFramework may expand the div with additional elements like this:

				
					<body>
  <div id="fancyWidget">
    <span class="label">Label</span>
    <button class="increment button">+</button>
    <button class="decrement button">-</button>
  </div>
<script src="https://www.thinktecture.com/core/cache/min/1/f55825a6495bdf0fcc3f0a4b3fe23d0b.js" data-minify="1"></script></body>
				
			

You can notice that some of the selectors are generic, label or button for instance. Either your own application or another third party framework likely defines the same classes. That leads to overwriting styles and breaking your UI. If the expansion would insert elements having a specific ID, the component is single-use. According to the specification, an ID should be used only once per page.

Taking a look at Web Components the sample above will look like that:

				
					<html>
  <head>
      
  </head>
  <body>
    <my-counter value="1" minimum="-5" maximum="5"></my-counter>
  <script src="https://www.thinktecture.com/core/cache/min/1/f55825a6495bdf0fcc3f0a4b3fe23d0b.js" data-minify="1"></script></body>
</html>
				
			

Several things have changed here! At first, we have a bundle import. Importing the my-counter JavaScript module also includes the necessary stylesheets. Everything is in one place, and you don’t have to import anything else.

Instead of having a div tag, we now have a my-counter tag due to the usage of Custom Elements. It is adding much more semantic to the code because you precisely know the component used. Due to the attributes, it also exposes the API of the component. So you can see that this component has a value, a minimum and a maximum.

Last but not least, it has a local scope due to Shadow DOM. Neither there is style bleeding into the component, nor a style overwrite from the component. Your UI does not break.

Encapsulation

As mentioned in the paragraph before, a Web Component is locally scoped. It is encapsulated because of Shadow DOM. Consider the following sample:

				
					<html>
  <head>
    
    
    <style>
      label {
        color: red !important;
      }
    </style>  
  </head>
  <body>
    <my-counter value="1" minimum="-5" maximum="5">
      
      <label>A label</label>
    </my-counter>
  <script src="https://www.thinktecture.com/core/cache/min/1/f55825a6495bdf0fcc3f0a4b3fe23d0b.js" data-minify="1"></script></body>
</html>
				
			

Without the usage of Shadow DOM, the style definition from the main document would bleed into the component, coloring the label red. Even if there is another styling defined in the component itself, the !important overwrites it.

However, since your Web Component uses Shadow DOM, no style bleeding occurs. No matter how you try to overwrite it, the browser ignores CSS outside of the Web Component. Except if your Web Component defines CSS variables, then you can use those variables in your main document to overwrite the ones defined in the Web Component. And that’s a good thing because you, as a component developer, are responsible for creating those CSS variables. Basically, you build an UI API for your consumers, where you want them to be able to overwrite certain aspects, like sizes or colors. Besides, you can also use CSS Shadow Parts for defining elements that can be styled by the user. Again, that’s good, because you can specify which elements can be styled – it is your API.

As mentioned in the introduction, if you are curious about more in-depth technical aspects of Web Components, check out my colleagues‘ article about native Web Components without a framework.

Business Perks of Web Components

In this section, we are exploring in which ways Web Components can help your business.

Reusability

We talked about this in the technical perks section above already, but it is worth mentioning on the business side, too!

Since we can share Web Components easily, that also implies we have to develop them only once. We have one code base (to rule them all) we need to manage instead of multiple ones, with possible re-development of already existing components. That helps tremendously to write high quality and highly tested code. Also, it includes that code is easier to maintain. All in all, the overall developer experience gets better.

But, you still need proper PR review processes, linter rules, auto-code formatting tools, and further. The benefit is that everyone, every SPA framework, and every website can consume your Web Components.

Additionally, Web Components help to increase the consistency of your application, the look and feel of your brand. Since all teams use the same components, the applications look and feel the same. The developers can focus on creating specific features for each application without having to redevelop the brand’s look and feel.

Browser Standards

In the technical section, I have mentioned the usage of several browser standards like Shadow DOM or HTML Templates. Utilizing them and training people on the standards makes it easier to share knowledge and developers between projects. It does not happen anymore that someone cannot help in a project, because he is an Angular developer, but the project is using React.If both use Web Components, your tools are JavaScript, HTML, and CSS. Languages, which are well-known to any experienced Web Developer.

Summary

In this article, we learned a lot about the perks of Web Components. They are not only a time-saver in development but also a money-saver in business due to the high reusability and hopefully better maintainable code.

When creating Web Components, we also need to think about our APIs. On the one hand, we have the JavaScript APIs. On the other hand, there are CSS APIs with Shadow Parts and CSS variables. Thinking about and shaping your component’s API helps to create small, reusable, and very specific Web Components.

Kostenloser
Newsletter

Aktuelle Artikel, Screencasts, Webinare und Interviews unserer Experten für Sie

Verpassen Sie keine Inhalte zu Angular, .NET Core, Blazor, Azure und Kubernetes und melden Sie sich zu unserem kostenlosen monatlichen Dev-Newsletter an.

Diese Artikel könnten Sie interessieren
Angular
Master Web Component Forms Integration – with Lit and Angular

Master Web Component Forms Integration – with Lit and Angular

When a company has cross-framework teams, it is a good choice to use Web Components to build a unified and framework-independent component library. However, some pitfalls are to consider when integrating these components into web forms. Therefore, for a better understanding, we will look at two possible approaches and try to integrate them into an Angular form as an example.

Notice: All code samples are available on Github!
09.06.2022
Angular
About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

About Smart and Presentational Components, Architecture Overview & Concepts: Condensed Angular Experiences – Part 3

Modern web technologies enable us to write huge business applications that are performant and easy to use. But with time comes complexity to our projects naturally. That added complexity sums up and makes further app development slow and cumbersome. This article discusses how a simple architectural concept can make every app more maintainable, faster to develop, and extendable in the long run.
08.04.2022
Project Fugu
Copy & Paste Images – Real-World PWA: The Making Of Paint.Js.Org – Part 3

Copy & Paste Images – Real-World PWA: The Making Of Paint.Js.Org – Part 3

In part three of the series about the making of the web-based Microsoft Paint clone paint.js.org, I want to show how you can copy drawings from the Paint clone to other applications and paste them back.
27.04.2021
Web Components
Stencil – Web Components On Steroids

Stencil – Web Components On Steroids

In this article, we are exploring the framework Stencil from Ionic. Stencil is a Web Components compiler helping to create custom Web Components libraries that are usable in any web application.
06.10.2020
Dependency Injection
Deep Dive: Web Components & Dependency Injection – The Experiment

Deep Dive: Web Components & Dependency Injection – The Experiment

When developing Web Components you will ask yourself at some point, where to actually get the data and configuration from. If you are used to frameworks like Angular, you know that you can inject services and configurations. Web Components rely on HTML attributes, JavaScript properties and `CustomEvent` for input/outputs. But, what if we use that, to build our own dependency injection to share along with services and configuration? In this deep dive, we are going to experiment and not only see if it is possible but also if it makes sense.
18.09.2020
Angular
Creating Web Components With Modern SPA Frameworks – Angular, React, And Vue.Js

Creating Web Components With Modern SPA Frameworks – Angular, React, And Vue.Js

You might have read the article series about Web Components in which we talked about the advantages and disadvantages of Web Components in detail and how they are integrable in modern SPA frameworks. This article focuses on how you can create Web Components using a modern SPA framework and also addresses Angular Elements, Vue.js Web Components, and React. Besides, we will take a look at how to structure a project.
30.07.2020