Medium Feed

 

Sunday, April 24, 2022

Native web components vs Lit element: The key practical differences

LIT web component

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.




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)
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
Vanilla Web Component => Normal CSS stylesheet Lit Element => Constructable stylesheet
Vanilla Web Component => Yes, SupportedLit Element => Yes, supported
Vanilla Web Component => Achieved by getter / setter propertiesLit Element => Lit handles it as part of reactive lifecycle
Vanilla Web Component => Achieved with attributedChangedCallbackLit Element => Lit handles it as part reactive lifecycle
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.