Я пишу некоторые пользовательские элементы HTML5, которые содержат код, который транспилируется, чтобы он мог фактически работать на странице (графический код, латекс и т. д.), но я не могу найти какую-либо страницу или вопрос Stackoverlow, который объясняет, и как загрузить скрипт так, чтобы он ограничивался самим настраиваемым элементом.

Вместо этого все, что я могу найти, это полное отсутствие информации, поэтому я использую довольно глупую вставку ее в заголовок документа, переписанную так, чтобы она сначала брала правильный элемент из глобального реестра, что очень грязно. I работает, но было бы намного лучше иметь возможность внедрять сценарии в теневой DOM таким образом, чтобы они выполнялись, точно зная, для какого элемента они выполняются.

Прямо сейчас код (в сокращенном виде) выглядит так:

import { uuid } from "./uuid.js";
import { Parser } from "./code-parser.js";

class MyElement extends HTMLElement {
  constructor() {
    super();

    this.uid = uuid.v4();
    window[this.uid] = this;

    const jsCode = `
      import { Base, API, ... } from "./lib.js";
      class Example extends Base {
         constructor() {
           super(window[${this.uid}]);
           delete window[${this.uid}];
         }
         ${Parser.rewrite(this.textContent)}
      }
      new Example();
    `;

    const script = document.createElement(`script`);
    script.type = `module`;
    script.src = URL.createObjectURL(
      new Blob([jsCode], {type: `text/javascript`})
    );

    this.attachShadow({ mode: 'open' }).append(script);
  }
}

customElements.define(`my-element`, MyElement);
export { MyElement }

Это работает, конечно, но работает (временно) загрязняя window. Есть ли способ прикрепить элемент сценария к пользовательскому элементу или теневой DOM пользовательского элемента, чтобы он выполнялся со знанием того, для какого пользовательского элемента или какой теневой DOM он выполняется?

Изменить: чтобы быть явным, это должно работать для сценариев, использующих современный код, основанный на модули: любой оператор import все еще нуждается в разрешении. Также обратите внимание, что все, что основано на подходах, требующихunsafe-eval (6.1 .11.3) или unsafe-inline для добавления в CSP script-src использовать нельзя.