lit-osagai 🧙‍♂️

The power of lit-html with osagai

Install

You can get it on npm.

npm install lit-osagai

Or import from unpkg

import { define, html } from "https://unpkg.com/lit-osagai/dist/lit-osagai.mjs";

Usage

import { define, html } from "lit-osagai";

function HelloWorld() {
  return () => html`
    <h1>Hello World</h1>
  `;
}

define("hello-world", HelloWorld);

---

API

Table of Contents

• define
  • Parameters
• html
  • Parameters
• attachShadow
• onConnected
  • Parameters
• onDisconnected
  • Parameters
• onAttributeChanged
  • Parameters
• update
  • Parameters

define

Define a new custom element

Parameters

• name String Name for the new custom element. Note that custom element names must contain a hyphen (ex. hello-world)
• Component OsagaiComponent Function that will return a Template function that defines the layout of your custom element. Reference
• options Object Configuration options from Osagai and custom elements. Reference

html

Interprets a template literal as an HTML template that can efficiently render to and update a container. From lit-html docs

Parameters

• strings TemplateStringsArray

Returns TemplateResult

attachShadow

Attach a shadow dom in the element. More at Osagai docs

onConnected

Add a callback to be performed when the element is connected in the document. Osagai docs

Parameters

• element OsagaiElement Instance of the osagai element.
• callback Function Function that will be perfomed when the element is connected.

onDisconnected

Add a callback to be performed when the element is disconnected from the document. Osagai docs

Parameters

• element OsagaiElement Instance of the osagai element.
• callback Function Function that will be perfomed when the element is disconnected.

onAttributeChanged

Add a callback to be performed when one of the attribute from the observedAttributeslist is added, changed or removed. Osagai docs

Parameters

• element OsagaiElement Instance of the osagai element.
• callback Function Function that will be runned with an object with the information of the attribute changed. (name, current, old)

update

Updates the data of the Component, scheduling a new change in the DOM using lit-html and return a promise with the new data returned by the dataChanger.

Parameters

• element OsagaiElement Instance of the element to be updated. Reference
• dataChanger Function Function that receive as parameter the data that needs to be changed and needs to return the new data. This could also be a promise that will be resolved by the update function. Reference

Returns Promise a promise with the new data changed