preface

This is the fifth article in the business platform front end on the output of Web Components in business practice.

In this article, you’ll learn what Web Components are and best practices for how the business center can land them in business scenarios.

The screenshot of this article is from the internal technology sharing of the front-end of the service platform.

First Introduction (What is Web Components)

Shadow DOM technology is adopted in the implementation of the VIDEO component provided by HTML5. Shadow DOM technology is one of the core suite of Web Components, and input and SELECT are also adopted this technology. What Shadow DOM is is explained below.

Second, the practice

Based on the business, let’s first look at a visual version of the order card:

Using Web Components, the code is shown as follows:

There are three technology suites for Web Components

  • Template: Use Template to generate the DOM;
  • Shadow DOM: Use Shadow DOM to isolate CSS styles
  • Custom Elements: HTMLElement is a class in the DOM API. HTMLElement is a class that has HTML attributes and apis. Custom Elements are used to customize Elements.

Template and Custom Elements are easier to understand, but what is Shadow DOM?

The Shadow DOM is an independent sandbox that does not interfere with other DOM elements and is naturally CSS style isolated. Similar to Vue’s Scoped style tag, it does not interfere with other tag styles.

Let’s take a look at the more concrete
component code:

How do you dynamically generate the DOM when component content is dead? Let’s read on:

The answer is to use the life cycle of the Web Components component, where the connectedCallback is the first mounted call to the DOM node and is called only once, where you can get the attributes passed in externally. Property changes will call attributeChangedCallback, can do the dom to update related things here, here is not, you can explore.

Dom can now be dynamically generated, how to play click events? Vue: @click; React: onClick; React: onClick

Okay, so that’s the basics. That’s Web Components!

Third, summary

Web Components have the following characteristics:Its application scenarios are also rich:

Component library

For example: Taro V3 version of WCs has been implemented in China. The following is a screenshot of the official website:

Across the

For example, cross-end refers to a set of Web Components that can run on the Web as well as on applets, which are naturally supported by Web Components. A possible solution to run on applets can be found in Taro 3.x.

The basic principle is that the Taro Runtime provides a set of apis to simulate DOM & BOM. The final apis called by React & Vue are mapped to the same apis simulated by the Taro Runtime. Taro Runtime then makes calls to wechat applet related components and apis inside the simulated API. At present domestic Tencent open sourceomi-mpImplement cross-end, if you are interested, take a look.

Micro front-end

The basic elements of the micro front end are stack independence, application isolation and independent development. At present, Web Components are consistent, so it is theoretically feasible to use Web Components as a micro front end.

Four, do something

Now that we know WCs is awesome, what can we do with it for our business?

🍉🍉🍉

In early September, the front end team of our business center was building the Vue component library with the team of several departments. At that time, our product manager proposed to reconstruct the order, which would involve multiple projects of React and Vue technology stacks.

Therefore, we started to look for a set of component solutions that can cross the technology stack. In September, our group was building the Vue 2.x component library with Several departments while exploring the possibility of cross-technology components.

After continuous exploration, we used the business development Buffer time to precipate a set of Components based on Web Components technology across the stack library!

Next, I would like to introduce our works Quark:Please click on the official website

In terms of data, the following figure shows the implementation of Quark in business. So far, Quark has been able to withstand the 40W + PV project, and the monitoring data shows that the operation is good.

  • [Small size] Lighter than light, Quark CDN total package size of 20K!
  • Supports Vue, React, Angular and other frameworks/no frameworks
  • High quality 19+ High quality components
  • [Load on Demand] Support on demand reference
  • Full documentation: Detailed documentation and examples
  • [Single test] Unit test coverage
  • [TS] Supports TypeScript
  • [SSR] support server-side rendering
  • [Themes] Support customized themes

Check part of the article has been sent to Intranet forum!

The above.