Lit: Difference between revisions

(2 intermediate revisions by the same user not shown)

Line 1:

[https://lit.dev/] is a library to write web components which are similar to a browser-based version of React.

[https://lit.dev/ 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 <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===

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

@@ Line 1: / Line 1: @@
-[https://lit.dev/] is a library to write web components which are similar to a browser-based version of React.
+[https://lit.dev/ 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 <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===
+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