Lit: Difference between revisions
No edit summary |
|||
| Line 6: | Line 6: | ||
===Events=== | ===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. | 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. | ||
# Create a new event name or event class. | |||
# In the parent element, use <code>this.addEventListener</code> in the constructor to set the callback for the event. | |||
# In the child class, call <code>this.dispatchEvent</code>. | |||
===React interop=== | ===React interop=== | ||
Latest revision as of 07:25, 30 March 2025
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.
- Create a new event name or event class.
- In the parent element, use
this.addEventListenerin the constructor to set the callback for the event. - In the child class, call
this.dispatchEvent.
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