custom elements in Preact or React without CE polyfills.

CustomElement.js

const HAS_NATIVE_CE = window.customElements != null;
const HTMLElement = HAS_NATIVE_CE ? window.HTMLElement : class{ constructor(self) {  return self; } };

export class CustomElement extends HTMLElement {
  constructor(inst) {
    this.__instance = super(inst);
    return this.__instance;
  }
  get props() {
    return Object.assign({}, this.__props);
  }
  
  set props(props) {
    this.__props = props;
    // debounce __render(props, oldProps); if props !== oldProps
  }
  
  connectedCallback() {
    console.log('connected');
  }
  
  static setProps(props) {
    return (ref) => {
      if (!ref.__instance) {
         ref.__instance = new CustomElement(ref);
         ref.__instance.connectedCallback();
      }
      ref.__instance.props = props;
    };
  }
}

if (HAS_NATIVE_CE) {
  customElements.define('custom-element', CustomElement);
}

PreactComponent.jsx

import CustomElement from './CustomElement';

export default class PreactComponent extends Component {
  render({ prop1, prop2 } = props) {
    return (
        <custom-element
          ref={
            CustomElement.setProps(
              {
                prop1: prop1,
                prop2: prop2
              }
            );
          }
        />
    );
  }
}