Build Universal Web Components with LitElement

In this tutorial, I’ll be showing you how to create your first LitElement component and render it in a vanilla HTML file.

October 28, 2021 1 Min Read
Build Universal Web Components with LitElement
Build Universal Web Components with LitElement

Codesphere

From everyone in the Codesphere Team:)

Table of Contents

It feels like every day a new web framework appears fighting for your attention. With all these different frameworks, however, you might find yourself rewriting code to get your components working right on a new framework.

If you’re looking to create a universal component library, look no further than LitElement, a simple base class for creating cross-library components with their own embedded styling and javascript.

In this tutorial, I’ll be showing you how to create your first LitElement component and render it in a vanilla HTML file.


Setup

To get started, we’re going to create a new npm project with

npm init

We are then going to install lit-element and Polymer with:

npm i lit-element polymer

Polymer isn’t 100% necessary, but will just allow us to test this component easily.

Finally, let’s create an index.html and a card.js

touch index.html card.js


Code

Our index.html can be as simple as:

Note that all we need is the inclusion of the script tags to our custom component, as well as the component itself of course.

Our Card.js can then look as follows:

And that’s all it takes! We can then serve this page live with:

polymer server

And lo and behold:


Using Lit Element Anywhere

We can then use this exact same LitElement class in React, Vue, Angular, or whatever web framework you or your fellow developers prefer. All that needs to be done is to install Litelement and then access the custom tag you created.

So what do you think? Do you see a benefit of using LitElement, or is this just an extraneous layer? Let us know down below.

As always, happy coding from your friends at Codesphere, the most intuitive cloud provider on the market.

About the Author

Build Universal Web Components with LitElement

Codesphere

From everyone in the Codesphere Team:)

We are building the next generation of Cloud, combining Infrastructure and IDE in one place, enabling a seamless DevEx and eliminating the need for DevOps specialists.

More Posts

Changelog LTS Version Q3 25

Changelog LTS Version Q3 25

New cli, restricted domains, improved git integration, frontend improvements and more in the latest LTS version.

From Dev Chaos to Cloud Clarity: No More “It Works on My Machine”

From Dev Chaos to Cloud Clarity: No More “It Works on My Machine”

Tired of the “It works on my machine” nightmare? This blog explores how Codesphere eliminates environment drift by letting you develop in production-grade cloud workspaces. so your code runs the same everywhere, from dev to deploy. Build smarter, ship with confidence.

From Friction to Flow — How Codesphere Transforms Productivity

From Friction to Flow — How Codesphere Transforms Productivity

Discover how Codesphere transforms software development by unifying coding, CI/CD, deployment, and infrastructure into one seamless platform. Boost developer productivity, reduce DevOps overhead, and go from idea to live without switching tools or breaking flow.