How to use Web Components with UI design tools

What constitutes Web Components?

Web Components are snippets of JavaScript or HTML code designed to perform a simple and complete function. Virtually all browsers and World Wide Web Consortium standards support the foundational set of APIs for Web Components, which means developers can introduce Web Components into nearly any HTML page. This modularity frees developers from switching to another programming language, which usually creates pieces of page functionality that are opaque to web designers.

Web Components standards and related processes consist of four pieces:

• Custom Elements, which design or define Web Components;
• the Shadow DOM that frames Custom Elements in a way that makes them portable;
• ES Modules, which enables developers to define portable JavaScript documents; and
• HTML Templates that describe how to instantiate Web Components.

The specifications for Web Components enable developers to use Custom Elements, an extension of the browser API set, to define a particular piece for the browser to parse. Each Web Component is embedded in its Shadow DOM, which stands for Document Object Model, the representation of a webpage. Each Component can then function as a self-contained element of the larger page.

To use Web Components, developers must install, import and then reference them; the site webcomponents.org details this process, and it hosts Web Component samples and a community of web developers.

How to use Web Components to build a UI

It's one thing to write Web Components, but it's another to design UIs to take advantage of them. There are two pathways for how to use Web Components in a UI. You can incorporate them in webpage development using HTML, which will normally entail using Components in their native JavaScript or HTML form. Or you can turn to a UI design tool to work with Web Components directly.

Any modern HTML authoring tool that provides a means for JavaScript creation supports Web Components -- either to develop them or to use premade, commercial or free components in UI building tasks. However, HTML authoring doesn't necessarily impose discipline on page design, and developers must exercise some discipline to take full advantage of Web Components.

Components are objects. Think of a Web Component as a subpage that a constructor must invoke to be visible and active. Each Component has a constructor that runs when it's activated, which makes the Component visible and defines its initial state. Thus, object-oriented thinking is important when you construct a UI for Web Component implementation.

It's fairly easy for most JavaScript-fluent web designers to directly use Web Components, but it can be more challenging to achieve a cohesive design from a bunch of autonomous components. Before designers use Web Components, they should have the design-level elements down pat; they should also know how to use a framework to describe a UI, as well as the supporting tools to populate it with Web Components.

UI design tools, languages and frameworks

For the lowest barrier to entry with Web Components, use UI design tools. These tools can help design a UI that matches Web Component capabilities. Most web design tools follow the precepts of the Material Design system; and Google, which originally designed it, offers a Material Components framework, as well as a broader set of tools and practices associated with building a modular UI that's suitable with Web Components.

Material Design is the most widely used design language on the internet, but there are other options for UI designers who prefer customized looks. Materialize is a superset of Material Design that offers, according to many web designers, better creative support. MUI and Flat Remix are lightweight design languages that constitute subsets of Material Design.

Ant and Grommet are design languages that represent total departures from Material Design in principles and use.

There is also a Material Designs Lite that has its own Web Components, not dependent on JavaScript but framed directly in HTML; this UI design tool helps achieve a look and feel like Material Designs with many of the benefits of Web Components.

Many developers want event-driven and interactive UI designs, which can be a challenge to create with Web Components. They might have to use a UI design language like Material Design within a JavaScript web development framework, such as AngularJS or Bootstrap, both of which include Material Design hooks. For advanced UI construction, use one of these frameworks and integrate them with Material Design UI principles through these hooks.

Design + Web Components = the UI. The better control a software team has over its designs and the more it relies on standardized structures, the more it will get out of Web Component use.