Remote DOM: Isolate UI Rendering with Sandboxed JavaScript Environments

Introduction

Remote DOM is a powerful library developed by Shopify that allows developers to render a tree of DOM elements created in a sandboxed JavaScript environment directly to the DOM in a different JavaScript environment. This innovative approach enables the isolation of potentially untrusted code off the main thread, while still allowing it to render a controlled set of UI elements to the main page.

The library is particularly useful for synchronizing elements between a hidden <iframe> and the top-level page, or for leveraging Web Workers to run JavaScript libraries that typically require a top-level HTML page, such as Preact or Svelte. Remote DOM also offers a minimal polyfill of key DOM APIs to facilitate more lightweight sandboxed environments.

Installation

To integrate Remote DOM into your project, you'll need a web project capable of running two JavaScript environments: the "host" environment (main HTML page) and the "remote" environment (sandboxed). The core package, @remote-dom/core, is essential for establishing the connection between these environments.

You can install it using your preferred package manager:

# npm
npm install @remote-dom/core --save
# pnpm
pnpm install @remote-dom/core --save
# yarn
yarn add @remote-dom/core

After installation, you will set up a "receiver" on your host page to process updates from the remote environment and a RemoteMutationObserver in your remote environment to communicate changes back to the host.

Examples

Remote DOM provides several examples to help you get started and understand its capabilities:

• Getting started: Demonstrates the most basic usage, synchronizing text content between a main page and an <iframe>.
• Custom element: Extends the basic example to show how a sandboxed environment can render custom button elements, including handling attributes and events.
• The “kitchen sink”: A comprehensive example showcasing a fully-featured implementation of Remote DOM. This includes custom elements with properties, events, and methods, and the ability to sandbox UI in a web worker. It features implementations in vanilla JavaScript, htm, Preact, React, Svelte, and Vue.

These examples highlight the flexibility of Remote DOM, allowing you to mix and match various host and remote technologies without being tied to a specific JavaScript framework.

Why Use Remote DOM?

Remote DOM offers significant advantages for modern web development:

• UI Isolation: It allows you to run potentially untrusted or complex UI logic in a sandboxed environment, protecting the main thread from performance bottlenecks or security risks.
• Performance: By offloading rendering tasks to Web Workers or iframes, Remote DOM helps keep the main thread free, leading to a smoother and more responsive user experience.
• Framework Agnosticism: The library is designed to work with any JavaScript framework or backend technology, providing a flexible solution for various project setups.
• Controlled UI: Through the use of custom elements and an allowlist approach, you maintain tight control over the visual appearance and functionality of elements rendered from the remote environment.

Links

• GitHub Repository: https://github.com/Shopify/remote-dom
• Core Package Documentation: https://github.com/Shopify/remote-dom/tree/main/packages/core/
• Contributing Guide: https://github.com/Shopify/remote-dom/blob/main/CONTRIBUTING.md