Native web components vs Lit element: The key practical differences

To cope with the faster development of different front-end frameworks. Always there is a clear need that the UI we develop is should be framework agnostic, not fall into a trap of particular framework-based (Angular/React/Vue) implementation. Here is where the reusable HTML web components help in our product designs.

There is quite some way to develop shareable web components. Here in this article, I will mainly discuss the “Lit element” based web component and how it differs from a “vanilla/native w3c standard custom web component” development.

Let us first quickly understand about these two approaches before doing deep comparison.

LIT web component

Lit the word is derived from one of the ES6 features called the “template LITeral” function and that is the basis for the entire Lit rendering engine framework. Lit is lightweight library for building and supports simple API for web component managing tasks like managing properties, attributes, rendering..etc.

Vanilla web component

Vanilla/native web components can be created by extending the native HTMLElement class and registering to the browser by calling customElements.define API.

As we know, we can achieve a custom web component from either a vanilla web component or a LIT-based component. But below are key features highlights which approach makes a developer’s life easier, and produce less code, easy maintenance, and better performance.

Let us do comparison with key functionalities for managing web component.

Coding syntax

Vanilla Web component => Imperative
Lit Element => Declarative

 Rendering Template

Vanilla Web Component => JS InnerHtml binding Or <template> cloning nodesLit Element => Lit Template (Tagged Template Literals functions)

Lifecycle hooks

Vanilla Web Component => constructor, connectedCallback disconnectedCallback, attributeChangedCallback, adoptedCallbackLit Element => Lit introduces a set of render lifecycle callback methods on top of the native Web Component callbacks

Styles/ CSS

Vanilla Web Component => Normal CSS stylesheet Lit Element => Constructable stylesheet

ShadowDOM

Vanilla Web Component => Yes, SupportedLit Element => Yes, supported

Property Binding

Vanilla Web Component => Achieved by getter / setter propertiesLit Element => Lit handles it as part of reactive lifecycle

Attribute Binding

Vanilla Web Component => Achieved with attributedChangedCallbackLit Element => Lit handles it as part reactive lifecycle

Event listeners

Vanilla Web Component => Event listener needs to be initialized programmatically in the connectedCallback and diconnectedCallback lifecycle.Lit Element => In lit templates supports adding event listener to node with @EVENT_NAME binding syntax.