This example shows the simplest setup using Remote DOM. It creates an iframe element to serve as the “remote” sandbox. In that sandbox, it defines a ui-button custom element, which allows the remote environment to render a styled button.

This example also shows how you can define event handlers that are called between environments, by showing a click event on the ui-button element. In order to support function calls over a postMessage sandbox, this example uses @quilted/threads, which was designed to work well with Remote DOM. However, you can use any other library that allows you to pass functions between JavaScript environments, like comlink.

From the root of the repository, run the following command:

pnpm --filter example-custom-element start