Little
[LitComponent]{#LitComponent data-4search="ui/little.js:LitComponent;section"}
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]{#LitComponent data-4search="ui/little.js:LitComponent;class"} : …
[**`mkstate`**]{#mkstate data-4search="ui/little.js:mkstate;func"} `(`*str_olist*`)`
: Install reactive Signal.State for all props
Constants
[JsExtract
]{#JsExtract data-4search="ui/little.js:JsExtract;export"}
: 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
]{#lit_update_all data-4search="ui/little.js:lit_update_all;func"} (
root)
: Call requestUpdate() on all LitElement
s
[css_url
]{#css_url data-4search="ui/little.js:css_url;func"} (
base_url)
: Construct the stylesheet URL from a base URL (enforcing .css
extension).
[fetch_css
]{#fetch_css data-4search="ui/little.js:fetch_css;func"} (
base_url)
: Fetch (extracted) asset from a base URL (enforcing .css
extension) as "text/css"
[adopt_component_styles
]{#adopt_component_styles data-4search="ui/little.js:adopt_component_styles;func"} (
element)
: Ensure that element has all stylesheets with [data-4litcomponent] applied to it