Define a custom element in an Electron preload script.

preload-custom-element.ts

contextBridge.exposeInMainWorld('api', {
  click() {
    console.log('clicked');
  },
});

function mainWorldScript() {
  const api: any = (window as any).api;

  window.customElements.define(
    'test-element',
    class extends HTMLElement {
      constructor() {
        super();
        const btn = document.createElement('button');
        btn.innerText = 'test';
        btn.addEventListener('click', api.click);
        const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(
          btn,
        );
      }
    },
  );

  delete (window as any).api;
}
webFrame.executeJavaScript(`(${mainWorldScript}());`);

const test = document.createElement('test-element');
document.body.prepend(test);