lit-vaadin-helpers

Helpers for using Vaadin web components with Lit 2

Usage no npm install needed!

<script type="module">
  import litVaadinHelpers from 'https://cdn.skypack.dev/lit-vaadin-helpers';
</script>

README

lit-vaadin-helpers

Helpers for using Vaadin web components with Lit 2.

Installation

npm install lit-vaadin-helpers

Note: this library is compatible Vaadin components 21.0.0 and above.

Usage

import { html, LitElement } from 'lit';
import '@vaadin/vaadin-select';
import '@vaadin/vaadin-list-box';
import '@vaadin/vaadin-item';
import { selectRenderer } from 'lit-vaadin-helpers';

class DialogDemo extends LitElement {
  render() {
    return html`
      <vaadin-select
        ${selectRenderer(
          () => html`
            <vaadin-list-box>
              <vaadin-item>Option 1</vaadin-item>
              <vaadin-item>Option 2</vaadin-item>
              <vaadin-item>Option 3</vaadin-item>
            </vaadin-list-box>
          `
        )}
      ></vaadin-select>
    `;
  }
}

See demo folder for more examples.

Contributing

Install dependencies

npm install

Run build

npm run build

Run demo

npm run dev

Run unit tets

npm test