ui/little.js file

LitComponent

An interface extending LitElement with reactive render() and updated() methods.

Methods:

render()
A this-bound Wrapper around LitElement.render() with JS Signal tracking.
updated (changedProps)
A this-bound Wrapper around LitElement.updated() with JS Signal tracking.
request_update()
A this-bound wrapper around LitElement.requestUpdate().
weak_this()
A new WeakRef to this.
createRenderRoot()
In addition to calling LitElement.createRenderRoot() this will call adopt_component_styles().

LitComponent class

class LitComponent

…

mkstate (str_olist)
Install reactive Signal.State for all props

Constants

JsExtract

API to mark template strings for extraction and fetch extracted assets.

  • JsExtract.css`body { font-weight:bold; }`
    Mark CSS text inside a Javascript file for extration by jsextract.js.
  • node jsextract.js inputfile.js
    Extract JsExtract.css`` strings into inputfile.jscss.
  • await JsExtract.fetch_css ('/path/to/inputfile.js');
    Use the browser fetch() API to retrieve the extracted string as text/css from '/path/to/inputfile.css'.
  • JsExtract.fetch_css (import.meta);
    Variant of the above that utilizes import.meta.url.
  • JsExtract.css_url (import.meta);
    Variant of the above that just provides the stylesheet URL.

Functions

lit_update_all (root)
Call requestUpdate() on all LitElements
css_url (base_url)
Construct the stylesheet URL from a base URL (enforcing .css extension).
fetch_css (base_url)
Fetch (extracted) asset from a base URL (enforcing .css extension) as "text/css"
adopt_component_styles (element)
Ensure that element has all stylesheets with [data-4litcomponent] applied to it