Agile Web Development with Rails 7.2

Creating a Reusable Web Component

Web Components^[122] are an industry standard way of extending HTML itself to implement custom behaviors and presentation.

You don’t need to start from scratch when building a web component. You can build upon a rich ecosystem of npm^[123] packages. We’ll make use of lit.^[124] We start by “pinning” it to our application so that it can be imported:

> bin/importmap pin lit
Pinning "lit" to https://.../index.js
Pinning "@lit/reactive-element" to https://.../reactive-element.js
Pinning "lit-element/lit-element.js" to https://.../lit-element.js
Pinning "lit-html" to https://.../lit-html.js
Pinning "lit-html/is-server.js" to https://.../is-server.js

Next, we’ll write a web component. The following ...