Skip to content

Latest commit

 

History

History

polyfill

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

@remote-dom/polyfill

A polyfill for the browser APIs used by Remote DOM. This allows you to use Remote DOM in environments that don’t have a native DOM, like Web Workers.

This package provides a low-level polyfill, with hooks that allow other libraries to intercept changes to the DOM. Unless you know you need this package, you probably want to import from @remote-dom/core/polyfill instead, which uses the hooks provided by this library to automatically synchronize remote elements between environments.

Installation

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

Usage

This package provides a Window class, which implements a limited subset of the Window browser interface. You’ll create an instance of the Window class and install it to the global environment using the Window.setGlobal() method.

import {Window} from '@remote-dom/polyfill';

const window = new Window();
Window.setGlobal(window);

// Now you can use many important DOM APIs, like `document` and `Element`:
const div = document.createElement('div');

This process will install polyfilled versions of the following globals:

This polyfill lets you hook into many of the operations that happen in the DOM, like creating elements, updating attributes, and adding event listeners. You define these hooks by overwriting any of the properties on the hooks export of this library.

import {hooks} from '@remote-dom/polyfill';

hooks.createElement = (element) => {
  console.log('Creating element:', element);
};