“This is the 21st day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

If we choose to do front-end development without using any framework, we need to develop the following code for a complete web page:

  • The HTML code
  • CSS code
  • JavaScript code

As recently as a few years ago, the HTML part of the code was almost impossible to reuse, which resulted in the need to develop a lot of duplicate HTML code, even with the CV method, the code redundancy is inevitable.

The background to the birth of Web Components

In recent years, we have known the concept of “components” when using front-end frameworks such as Vue. By using components, you can improve code reuse, create multiple uses at once, and simplify the development process to some extent.

Since componentized development is so popular and can bring great convenience to development, then of course the browser has a reason to support componentized native, Web Components emerged at the historic moment, its birth makes the browser has the ability to support componentized native.

The concept of Web Components

What are Web Components? As the name implies, “web component”, to quote MDN:

Web Components are a different set of technologies that allow you to create reusable custom elements whose functionality is encapsulated outside of your code and use them in your Web applications.

Note the key words: reusable, customizable, which is why we love using component functionality in third-party frameworks.

Composition of Web Components

Web Components are not a single specification, but a series of technical Components, including Custom Element, Shadow DOM, and HTML Templates. They can be used together to create custom elements that encapsulate functionality and can be reused anywhere you like without worrying about code conflicts.

Custom Elements

A set of JavaScript apis that allow you to define Custom elements and their behavior, and then use them as needed in your user interface.

Shadow DOM

A set of JavaScript apis for attaching encapsulated “shadow” DOM trees to elements (rendered separately from the main document DOM) and controlling their associated functionality. This way, you can keep the functionality of elements private so that they can be scripted and styled without fear of running afoul of the rest of the document.

HTML Templates

The

and

elements let you write tag templates that are not displayed on rendered pages. They can then be reused many times as a basis for custom element structures.

Web Components compatibility

Compatibility is a test of whether a technology can be used in a production environment. Let’s take a look at the compatibility of various technologies of Web Components:

As you can see from the figure above, Web Components is already extremely well supported on major browsers and can be used in production environments if downward compatibility is not strictly required.

conclusion

The development of technology is always “providing convenience” for the direction, the emergence of Web Components can be said to be the inevitable result of the development of front-end technology, and we need to do is to find a way to use it for our own.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!