Investigate Web Components / Shadow Dom

[rameshvarun]

No description provided.

[Danny-Engelman]

It wil run in a Web Component without shadowDOM, because its just HTML

It does not run in shadowDOM because the code runs querySelectorAll

[Danny-Engelman]

Note!

You can't have the Web Component check if the CSS and JS exist, and if not inject them in the page.
Looks like the init/display ends up in an endless loop

Because you only trigger on DOMContentLoaded, maybe monitor for (new) scripts with the MutationObserver API

const domLoaded = new Promise<void>((resolve) => {
  document.addEventListener("DOMContentLoaded", () => resolve());
});

domLoaded.then(() => {
  // Transform all script / pre tags into cells.
  const scripts = document.querySelectorAll(
    "script[type='text/notebook-cell'], pre.notebook-cell"
  ) as NodeListOf<HTMLScriptElement>;