Web Component using JSX Demo

web-component-jsx.js

import { innerHTML, createTree } from 'diffhtml';
import WebComponent from 'diffhtml-components/web-component';
import PropTypes from 'proptypes';

customElements.define('jsx-test', class extends WebComponent {
  render({ message }) {
    return (
      <div>{message}</div>
    );
  }

  static propTypes = {
    message: PropTypes.string.isRequired,
  }
});

innerHTML(document.body, <jsx-test message="Hello world!" />);

Output: