Lit

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

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`
    p {
      color: blue;
    }
  `;

  @property()
  name = 'Somebody';

  render() {
    return html`<p>Hello, ${this.name}!</p>`;
  }
}

<body>
  <simple-greeting name="World"></simple-greeting>
</body>

import * as React from 'react';
import { createComponent } from '@lit-labs/react';
import { MyElement } from './my-element.js';

export const MyElementComponent = createComponent(React, 'my-element', MyElement, {
  onactivate: 'activate',
  onchange: 'change',
});

<MyElementComponent active={isActive} onactivate={(e) => (isActive = e.active)} />