Web components series (I) - Overview

Preface

If we choose not to use any framework for front-end development , So for a complete web page , We need to develop the following code ：

• HTML Code
• CSS Code
• JavaScript Code

Just a few years ago ,HTML There is no possibility of reusing part of the code , As a result, we may need to develop a large number of repeated HTML Code , Even using CV Law , Code redundancy is inevitable .

Web Components Birth background

In recent years , We are using a front-end framework （ such as Vue） when , We all know there's a “ Components ” The concept of , Code reuse can be improved by using components , Create multiple uses at once , To some extent, it simplifies the development process .

Since component-based development is so popular , It can also bring great convenience to development , So browsers certainly have a reason to support componentization natively ,Web Components It came into being , Its birth gives browsers the ability to natively support componentization .

img

Web Components The concept of

What is the Web Components ？ seeing the name of a thing one thinks of its function , Namely “ Web components ”, quote MDN In other words, it means ：

Web Components It's a different set of technologies , Allows you to create reusable custom elements （ Their functionality is encapsulated outside your code ） And in your web Use them in your application .

Notice the key words ： reusable 、 customized , This is also the reason why we are happy to use component functions in third-party frameworks .

Web Components The composition of

Web Components Not a single specification , It's a series of technologies , Include Custom Element、Shadow DOM、HTML templates Three technical specifications . They can be used together to create custom elements that encapsulate functionality , It can be reused anywhere you like , Don't worry about code conflicts .

Custom elements（ Custom elements ）

A group of JavaScript API, Allows you to define custom elements And their behavior , You can then use them as needed in your user interface .

Shadow DOM（ shadow DOM）

A group of JavaScript API, Used to encapsulate “ shadow ”DOM Trees are attached to elements （ With the main document DOM Present separately ） And control its associated functions . In this way , You can keep the functionality of the element private , So they can be scripted and stylized , Don't worry about conflict with the rest of the document .

HTML templates（HTML Templates ）

<templete> and <slot> Element allows you to write markup templates that are not displayed in the rendering page . Then they can be reused many times as the basis for a custom element structure .

Web Components The compatibility of

Compatibility is the standard to test whether a technology can be used in the production environment , Let's take a look Web Components Compatibility of various technologies ：

image-20220206221625474

image-20220206222054931

image-20220206222122783

As you can see from the picture above ,Web Components Support on mainstream browsers has been extremely good , If the downward compatibility requirements are not strict , It can be used in the production environment .

summary

The development of technology always takes “ Provide convenience ” For the direction of ,Web Components The emergence of can be said to be the inevitable result of the development of front-end technology , What we need to do is to find ways to make good use of it to serve ourselves .

~ The end of this paper , Thank you for reading ！

Learn interesting knowledge , Make interesting friends , Create interesting souls ！

Hello everyone , I'm the author Hermit King , I hope you can give me more advice ！