Web Components - An Introduction and Practical Usage

Web Components - An Introduction and Practical Usage

The Web Components specification is an emerging collection of technologies that allow you to define encapsulated, custom HTML elements in front-end web apps. Using Web Components, you can create your own declarative API for defining UIs. This article introduces the Web Components technology and its support in Wijmo.

Web Components recap

In our previous article, Web Components: Creating Custom HTML Elements in 2018, we discuss the core technologies of Web Components and how they are comprised of four standards:

  • Custom Elements
  • Shadow DOM
  • HTML Templates
  • HTML Imports

Custom elements

Custom elements allow you to create your own HTML elements that can be used in markup the same way as native HTML elements.

With custom elements you can:

  • Add an element to markup declaratively.
  • Define its initial values using custom attributes and have those values automatically propagate to the corresponding property values.
  • Subscribe to custom events using the standard Element.addEventListener method.
Wijmo as custom elements

With the Wijmo build 462, we introduced a Web Components interop (in Beta so far) that allows you to use Wijmo controls as custom elements. For example, you can add a FlexGrid with columns and filters using the following HTML:

<wjc-flex-grid id="grid">
    <wjc-flex-grid-filter></wjc-flex-grid-filter>

    <wjc-flex-grid-column binding="country" header="Country" width="*"/>
    <wjc-flex-grid-column binding="date" header="Date"/>
    <wjc-flex-grid-column binding="downloads" header="Downloads"/>
</wjc-flex-grid>

Having this markup, you can manipulate it in the JavaScript code-behind using conventional DOM API on the one hand and access control specific API right on the HTML element on the other hand.

For example:

  • Find FlexGrid element: let grid = docement.getElementById(‘grid’);
  • Call grid method: grid.autoSizeColumns();
  • Subscribe to grid event: grid.addEventListener(‘updatedView’, (e) => {doSomething();});

Here is a Web Components Intro sample that can be used to get more details on the Wijmo Web Components interop usage.

To work natively in browsers, Web Components should be implemented as ES2015 (ES6) code. To make this possible, we added two npm images in build 462, wijmo-es2015-commonjs-min and wijmo-es2015-esm-min, which contain Wijmo ES6 code in the CommonJS and ESM module formats respectively.

Benefits of Web Components

Whether you implement your application in pure JavaScript or using a framework, you can benefit from Web Components usage.

Web Components in pure JavaScript

With Web Components in pure JavaScript, you get a declarative, maintainable HTML markup.

Instead of adding a bunch of cryptic element definitions like these:

<div id=”statGrid”/>
<div id=” inpSales”/>

...then writing a lot of JS code (for substituting them with actual controls), you can write the following markup:

<wjc-flex-grid>
      <wjc-flex-grid-column binding=”date” header=”Date”/>
      <wjc-flex-grid-column binding=”sales” header=”Sales”>
</wjc-flex-grid>
<wjc-input-number step=”1” format=”c2”/>

Use JavaScript code to only apply special processing that can’t be expressed declaratively. That is, you define things in the right place – UI in markup and its behavior in JavaScript code.

This markup works natively in Chrome and Safari currently, and works in the rest of major browsers using polyfills.

Web Components in modern frameworks

Being used in modern frameworks like Angular, React or Vue, Web Components may bring even more benefits like attribute, property, and even bindings. This way, Web Components provide virtually the same usage convenience as the native components explicitly created for the framework. This allows you to reuse the same components and behavior libraries created around them in the different frameworks, without sacrificing a usage convenience.

We added the Web Components in Angular sample that demonstrates how it works in Angular.

For example, the following HTML markup creates Wijmo InputNumber and LinearGauge controls, which shows and updates the same model property.

Note: When implementing this de-facto two-way binding behavior, we didn’t use any lines of JavaScript code-behind:

<wjc-input-number [value]="theValue" (value-changed)="theValue = $event.target.value"/>
<wjc-linear-gauge [value]="theValue" (value-changed)="theValue = $event.target.value"/>

What browsers work with Web Components?

Web Components work in all browsers. Currently, you can run Web Components in Chrome and Safari natively, without any polyfills applied. FireFox supports web components in a particular experimental mode. This support should move to the production version very soon. Right now, you can run Web Components in this browser using the webcomponents-lite.js polyfill from the webcomponentsjs library.

The same is true for Edge.

You can run Web Components in Internet Explorer by running ES5 code and applying the custom-elements-es5-adapter.js polyfill from the webcomponentsjs library in addition to the one specified for FireFox.

What's next with the Wijmo interop and Web Components?

Our latest effort in Wijmo Web Components interop evolution addresses several issues. First, we’ll add more samples, especially demonstrating Web Components usage in different frameworks like React, Vue, and Polymer. Let us know what else frameworks you are interested in so that we address them too. And of course we offer components native to the frameworks as well. Check out our Angular DataGrid, React DataGrid and Vue DataGrid.

Also, we'll add support for the Shadow DOM with Wijmo controls that can be customized using CSS variables (a.k.a. custom properties). We expect to provide Shadow DOM as an optional feature (switchable by a global property), because the current state of this technology imposes severe limitations in controls customization, whereas the customization is one of the most robust Wijmo features. Many of you may prefer to use Wijmo Web Components without Shadow DOM and keep the flexibility of the traditional CSS customization.

For more articles like this, demos, videos and tutorials, check out our blog page. Do you have a demo request? Leave us a comment below!

Download Now!

Alex Ivanenko

Program Manager
comments powered by Disqus