LitElement provides helper methods and classes to create web components (Image credit: lit-element.polymer-project.org)
Spearheaded by Justin Fagnani at Google, LitElement aims to supersede Polymer Classic as the premier approach to web components. It provides helper methods and classes to create web components, without the required boilerplate setup. It has dramatically increased in popularity since its first stable release in February 2019.
02. Stencil
Stencil is a compile-time tool from the Ionic framework team. It will analyse each component, optimise it as best as it can, and return a version that can be used across different browsers and frameworks. It includes added behaviour such as JSX, which handles data binding like a React project.
03. Vue web component wrapper
While the Vue framework can work with web components without issue, using an existing Vue component as a web component elsewhere is trickier. This library will wrap the single-file component and map all the necessary bindings automatically, or the Vue CLI can take care of all the heavy lifting.
04. Skate
Skate works with other templating languages (Image credit: SkateJS)
By providing guidance alongside a thin layer on top of existing native functionality, Skate can provide great benefit with a smaller footprint than other libraries. Much of this comes from the ability to work with other templating languages like Preact, and drop in modules for additional functionality, such as server-side rendering.
05. Svelte
Svelte compiles its components into regular JavaScript and avoids shipping a runtime like other frameworks, which results in smaller files. While not required, Svelte components can be built as web components without needing any external tools. Define a tag name in the module configuration and Svelte will do the rest.
06. X-Tag
X-Tag is useful for tying components with those in other frameworks (Image credit: X-Tag)
The X-Tag project has gone through many iterations over the years. Now, this Microsoft-backed library mirrors much of the custom element specification, with its own approaches to style and templating. It is particularly useful when needing to support older browsers, or when tying components together with those in other frameworks.
07. Slim
While Slim is a relatively unknown library, it provides added functionality, such as one-way data binding and automatic re-rendering out of the box. It's fast and small too – weighing in at only 3.4Kb gzipped. Other directives can be dropped in as and when they are needed to keep things lean.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
6 elements to use today
Feel the benefits of web components right away with these elements.
01. Wired
Wired can help you mock up a page quickly (Image credit: Matt Crouch/Wired.js)
Most sites and applications go through several iterations before becoming a finished product. A lot of these start life as a prototype sketched on a notepad, or created inside a graphical application. Wouldn't it be better if these lived inside the browser to get an idea of how it works in the real world?
Wired is a set of web components that generate an interface with a hand drawn look using rough.js under the hood. Buttons, inputs and more are ready to be dropped in where needed and linked up for basic interactions to mock up a page in no time.
02. Material Components
These components are a work in progress (Image credit: material-components.github.io)
The team behind Google's Material Design pattern already have an implementation for the web. Currently, they're working to have them consumable through web components to be dropped in without extra configuration. Complex patterns such as tabs and drawers have been created with more on the way.
03. Brightspace UI
The company behind the Brightspace learning tool has made a set of its components open source for all to use. These include buttons, tables and inputs all with a focus on performance and accessibility. Any bugs the team come across are fixed and pushed out to help anyone else using them.
04. Vaadin
These pre-built components can help get you started (Image credit: Vlaadin)
The Vaadin platform is a set of pre-built UI components ready to be used to create an entire application. There's plenty available to help you get off the ground, including grid layouts, tooltips and progress bars. The paid-for pro components also include charts and text editors, configurable for all needs.
05. Animated Content Placeholder
Skeleton loading is a great way to improve perceived loading times. They act as a placeholder for incoming content that may take a while, such as a news feed or gallery. This component builds out a skeleton by using web components as the building blocks to mimic the loaded state.
06. Gluon-font-awesome
This is a lightweight wrapper around the popular Font Awesome icon library. Icons can be dropped in using a <font-awesome> tag, while the component handles the importing and loading of the font awesome library. It is built using Gluon – a lightweight framework providing convenience on top of native custom elements.
This article was originally published in 2019 in Web Designer magazine.
Matt Crouch is a front end developer who uses his knowledge of React, GraphQL and Styled Components to build online platforms for award-winning startups across the UK. He has written a range of articles and tutorials for net and Web Designer magazines covering the latest and greatest web development tools and technologies.
