purpose of lit/react component

[pociej]

Im playing arround and reading documentation of @lit/react and i see "While React can render Web Components, it cannot easily pass React props to custom element properties or event listeners."

Im not sure what above means. Lets take a look at example :

function App() {
  const [isActivated, setIsActivated] = useState(false);
  return (
    <>
        <simple-label
          name={isActivated ? "activated" : "deactivated"}
        ></simple-label>
        <simple-button
          onClick={() => {

            setIsActivated(!isActivated);
          }}
        >
          {" "}
          Click me{" "}
        </simple-button>

    </>
  );
}

Both simple-label and simple-button are webcomponents created by lit like this

import { LitElement, html, css } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("simple-button")
export class SimpleButton extends LitElement {
  @property({ type: Function }) onClick = () => {};

  static styles = css`
    :host {
      display: inline-block;
    }

    button {
      background-color: #0077cc;
      color: #fff;
    }
  }
  `;

  render() {
    return html`
      <button @click=${this.onClick}>
        <slot></slot>
      </button>
    `;
  }
}

and everything works smooth. Could you please show me example of something that is not solvable without this @lit/react glue ?

Im examining usability of lit as tool for building framework agnostic set of components. This sounds that its not in fact framework agnostic. Is same glue needed for lets say vue or svelte ?

[augustjk]

onClick is a bad example here because it is one of the built-in props that React will apply to native HTML elements, including custom elements. https://react.dev/reference/react-dom/components/common#common-props

Change the prop to handleClick instead and you'll see it no longer works.
Because React sets unrecognized props as attributes instead, non-string properties will break.

Here's an example showing the problematic interactions:
https://lit.dev/playground/#sample=examples%2Freact-basics&gist=57ef2beeef182272d12fddf930dd3fc9

I renamed onClick to handleClick and the button no longer toggles the state. I also made a <simple-card> custom element that takes a data object, which doesn't work unless you JSON.stringify() letting Lit's attribute converter convert it back to an object.

With the element inspector you can see the object prop is getting set as an attribute as [object Object] unless stringified first

[pociej]

@augustjk thx a lot, got it. Anyways there is still important question. Does lit have similar problems with vue/svelte/angular? Im trying to answer myself how well lit fits my needs, and im going to build components library.

[augustjk]

Honestly, I'm less familiar with those other frameworks. My general understanding is that functionally they work pretty well (as suggested by custom-elements-everywhere.com), but there might be some lacking ergonomics around using it more like native framework components like type-checking so we have some lab initiatives that generate wrapper for web components in Vue and Angular that have been worked on by other team members.

Shoelace has some docs on usage with Vue and Angular here:
https://shoelace.style/frameworks/vue
https://shoelace.style/frameworks/angular

[justinfagnani]

To be extra clear, Lit doesn't have problems with any frameworks - the frameworks might have problems working with standard DOM. https://custom-elements-everywhere.com/ is a site that tests frameworks for DOM compatibility. You can see most of them do very well.