`Unexpected error: HTMLElement is not defined` (cannot import web components library in config)

[4www]

Trying to make javascript imported code (local or library) available to all notebooks.

It seems not possible to import a javascript code (installed as npm package, or local code), that exports and defines web components (extending the HTMLElement class), from the observablehq.config.ts file.

Unexpected error: HTMLElement is not defined

Also tried patching the global namespace with jsDom, as when using this dependency in node, but same error.

// observable (try) patch for HTMLElement not defined with different properties
import jsdom from "jsdom";
const { JSDOM } = jsdom;

global.window = new JSDOM().window;
global.document = new JSDOM().window.document;
global.HTMLElement = new JSDOM().window.HTMLElement;
global.customElements = new JSDOM().window.customElements;
global.DOMParser = new JSDOM().window.DOMParser;

// Unexpected error: HTMLElement is not defined

Trying with this lib to import on this page (here as local js code in the ./src/ folder), in this PR.

Importing from a markdown notebook is possible, following the javascript docs, as it seems this code is evaluated in the browser.

The issue arises when importing a library or custom code from the framework config, as it seems this code is evaluated in node.

Alternative

Currently, importing the library in each notebook, and it works without error (as npm package or local code).