In your HTML:
<remote-dom-worker src="https://my-app.com/remote.js"></remote-dom-worker>
<script
src="https://remote-dom.io/v1/elements/remote-dom-worker.js"
type="module"
></script>In your Worker:
import {root} from 'https://remote-dom.io/v1/environment/worker.js';
root.innerHTML = '<p>This content was provided by a remote environment!</p>';In your classic script Worker:
importScripts('https://remote-dom.io/v1/environment/worker.nomodule.js');
const root = self[Symbol.for('remote-dom.root')];
root.innerHTML = '<p>This content was provided by a remote environment!</p>';In your HTML:
<remote-dom-iframe src="https://my-app.com/remote.html"></remote-dom-iframe>
<script
src="https://remote-dom.io/v1/elements/remote-dom-iframe.js"
type="module"
></script>In the iframe HTML:
<html>
<body>
<remote-root>
<p>This content was provided by a remote environment!</p>
</remote-root>
<script
src="https://remote-dom.io/v1/environment/iframe.js"
type="module"
></script>
</body>
</html>Using the body as the root element:
<html>
<head>
<script
src="https://remote-dom.io/v1/environment/iframe.js"
type="module"
></script>
</head>
<body>
<p>This content was provided by a remote environment!</p>
</body>
</html>Using a custom root element:
<html>
<body>
<div id="root">
<p>This content was provided by a remote environment!</p>
</div>
<script
src="https://remote-dom.io/v1/environment/iframe.js"
type="module"
data-root="#root"
></script>
</body>
</html>