Allow specifying custom HTMLElement base in defineCustomElement

[nicolo-ribaudo]

Scenario

I need to load some untrusted code in my web app. I'm doing so using an <iframe>, with a sandbox attribute that prevents script execution. It can basically load some HTML and CSS.

I want, however, to provide to this content some extra elements other than what is provided by plain HTML&CSS, and these extra elements/components are defined by me as Vue SFCs.

Non-working attempts

1: createApp() and mount in the iframe

The third-party HTML can provide some elements tagged with some special class/attribute, such as:

<div data-media-player data-src='foo.mp4'></div>

In my code I can then do something like the following:

import { createApp } from "vue";
import MediaPlayer from "./MediaPlayer.vue";

const elements = myIframe.contentDocument.querySelectorAll("[data-media-player]");
for (const el of elements) {
  createApp(MediaPlayer, { src: el.dataset.src }).mount(el);
}

This however doesn't fully work: styles from the SFC are not injected inside the iframe, they are only loaded in the top-level page. I need to somehow manually extract those styles and inject them.

2: custom element created in the main page and moved to the iframe

To avoid the styles problem, I need a solution that relies on self-contained styles. Thankfully Vue provides one, through custom elements and defineCustomElement.

The third-party HTML page can write the following:

<media-player src='foo.mp4'></media-player>

and my JS code would register the custom element inside the iframe:

import { defineCustomElement } from "vue";
import MediaPlayer from "./MediaPlayer.ce.vue";

iframe.contentWindow.customElements.register("media-player", defineCustomElement(MediaPlayer));

This however also does not work, because custom elements need to inherit from the HTMLElement of the realm/window that owns the document where the custom element is created. To register a class as a custom element in the iframe's registry, it needs to inherit from iframe.contentWindow.HTMLElement.

3 (working, but ugly): re-create elements in the main document and moving them to the iframe

Instead of what I tried in solution 2, my code needs to do something like this:

import { defineCustomElement } from "vue";
import MediaPlayer from "./MediaPlayer.ce.vue";

// register media-player outside of the iframe
customElements.register("media-player", defineCustomElement(MediaPlayer));

const elements = myIframe.contentDocument.querySelectorAll("media-player");
for (const original of elements) {
  // replace all the <media-player> elements in the iframe with elements created by the main page
  const recreated = document.createElement("media-player");
  recreated.src = original.src;
  original.replaceWith(recreated);
}

Ideal solution

It'd be great if defineCustomElement accepted an HTMLElement option, that it uses as root ancestor:

import { defineCustomElement } from "vue";
import MediaPlayer from "./MediaPlayer.ce.vue";

iframe.contentWindow.customElements.register(
  "media-player",
  defineCustomElement(MediaPlayer, { HTMLElement: iframe.contentWindow.HTMLElement })
);