Frontend Weekly
Published in

Frontend Weekly

Why Should I Learn About Web Components?

Web Components, an eclipsed standard by modern Web Frameworks.

This article aims to be a starting point in the universe of web components. It provides some basic concepts necessary to understand why they are important.

What is a Web Component?

Let’s start with the definition from MDN definition:

Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

To understand web components is essential to know some concepts, so let’s deep dive into it.

Custom Elements

Custom elements are a way to create your HTML tags defined by the WHATWG as:

Custom elements provide a way for authors to build their own fully-featured DOM elements

So, HTML allows us to develop, distribute and use an element like this one:

Shadow DOM

The impact of Shadow DOM in the development of web components is really important, so let’s try to understand them. MDN definition:

Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.

MDN provides this image

As part of the definition, I’ve highlighted in bold this sentence: “hidden DOM trees to be attached to elements in the regular DOM tree??”

What does this means, and why is it so important??

The key concept here is encapsulation, or the ability to add new content to your website that does not interfere with the previous one.

Learn more about Shadow DOM modes: open vs. close

What About the Usage?

Nowadays, the support for web components is broadly extended:

And here is the support for CSS Variables:

As you can see, most modern browsers support both standards.

Conclusions

I hope that this small introduction to web components helps you understand better what they are.

I encourage you to click the different links and learn more about these exciting concepts.

--

--

--

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Recommended from Medium

Why is local development of npm packages so hard?

Using User Snippets In VSCode For Faster Coding

Nike Air Zoom Wildhorse 3 GTX https://t.co/ad6EHRs5SI https://t.co/MuvoTHXeAs

Redesigned Starter page, Storybook 6.4, ESLint 8, and more in Nx 13.3!

React map to list, and mac

Who is going to win Polkadot Parachain auction slot 3 of round 1?

How to Create a Strapi v4 Plugin : Generate a Plugin 1/6

Creating an Angular 9 NPM Library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abimael Barea Puyana

Abimael Barea Puyana

>http://github.com/abimaelbarea >https://www.linkedin.com/in/abimaelbarea/

More from Medium

Chapter 17: HTML Content Tags and Styles

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

Create a Nested Comment/Reply Box Using JavaScript Web Components

How to create a Dynamic Digital Clock