lit-osagai

osagai with lit-html

Usage no npm install needed!

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

README

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/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

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