Lit

From David's Wiki
Revision as of 07:22, 30 March 2025 by David (talk | contribs)
\( \newcommand{\P}[]{\unicode{xB6}} \newcommand{\AA}[]{\unicode{x212B}} \newcommand{\empty}[]{\emptyset} \newcommand{\O}[]{\emptyset} \newcommand{\Alpha}[]{Α} \newcommand{\Beta}[]{Β} \newcommand{\Epsilon}[]{Ε} \newcommand{\Iota}[]{Ι} \newcommand{\Kappa}[]{Κ} \newcommand{\Rho}[]{Ρ} \newcommand{\Tau}[]{Τ} \newcommand{\Zeta}[]{Ζ} \newcommand{\Mu}[]{\unicode{x039C}} \newcommand{\Chi}[]{Χ} \newcommand{\Eta}[]{\unicode{x0397}} \newcommand{\Nu}[]{\unicode{x039D}} \newcommand{\Omicron}[]{\unicode{x039F}} \DeclareMathOperator{\sgn}{sgn} \def\oiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x222F}\,}{\unicode{x222F}}{\unicode{x222F}}{\unicode{x222F}}}\,}\nolimits} \def\oiiint{\mathop{\vcenter{\mathchoice{\huge\unicode{x2230}\,}{\unicode{x2230}}{\unicode{x2230}}{\unicode{x2230}}}\,}\nolimits} \)

Lit is a library to write web components which are similar to a browser-based version of React.


Usage

Events

With Lit, data flows down DOM elements and events flow up DOM elements. This is unlike React where callback handlers are use to pass data up the DOM tree.

React interop

See https://lit.dev/docs/frameworks/react/ for how to use lit components within React components.

There's no simple way to use React inside a webcomponent. You will need to wrap it inside a webcomponent. See https://stackoverflow.com/questions/66970860/creating-pure-web-component-from-react-components and https://github.com/bitovi/react-to-web-component