Shim the global environment with DOM globals. Useful for loading web component code. Powered by linkedom
Importing the module by default does not clobber global values, but rather adds a symbol to the global where DOM shims are placed. You can retrieve them like so:
import { domShimSymbol } from 'https://cdn.spooky.click/dom-shim/1.3.2/mod.js';
const { HTMLElement, customElements } = globalThis[domShimSymbol];
Commonly you will want to clobber globals for library support. To do so add the ?global
query param.
import 'https://cdn.spooky.click/dom-shim/1.3.2/mod.js?global';
You can use the unshim
export to remove the globals if you only want them available temporarily.
import { unshim } from 'https://cdn.spooky.click/dom-shim/1.3.2/mod.js?global';
import './some-element.js';
// We only needed the shim to load some-element.js, now remove them.
unshim();
You can specify which DOM globals are added by adding a comma-separated props
query param like so:
import 'https://cdn.spooky.click/dom-shim/1.3.2/mod.js?global&props=HTMLDivElement,HTMLParagraphElement,customElements';
If your runtime does not support query params (most bundlers) or you do not want the side-effect to take place immediate, you can use the other entry point shim.js
like so:
import { Shim } from 'https://cdn.spooky.click/dom-shim/1.3.2/shim.js';
let s = new Shim(['document']);
console.log(s.values); // { document }
// To apply the shim symbol to the global environment
s.apply();
// If you want the globals to be set on the global environment
s.shim();
Creating a new Shim
instance will create the shimmed environment. Calling s.apply()
will set the environment on the Symbol.for('dom-shim.defaultView')
property. Calling s.shim()
will apply the globals onto the environments globalThis
.
Note: if you call
.shim()
then you do not need to also call.apply()
.
BSD-2-Clause