diff --git a/client/src/components/Markdown/Sections/Elements/PluginContainer.vue b/client/src/components/Markdown/Sections/Elements/PluginContainer.vue
deleted file mode 100644
index 270e2bf09ef1..000000000000
--- a/client/src/components/Markdown/Sections/Elements/PluginContainer.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted } from "vue";
-
-// Define props
-const props = defineProps<{
-  pluginSrc: string;
-}>();
-
-// Reference for the plugin container
-const pluginContainer = ref<HTMLDivElement | null>(null);
-
-// Load the plugin script dynamically on mount
-onMounted(() => {
-  const container = pluginContainer.value;
-  console.log("here");
-  if (container) {
-    container.id = "app"; // Ensure the container has id="app"
-
-    const script = document.createElement("script");
-    script.src = props.pluginSrc;
-    script.async = true;
-
-    // Handle script load success
-    script.onload = () => {
-      console.log(`Plugin loaded from: ${props.pluginSrc}`);
-    };
-
-    // Handle script load failure
-    script.onerror = () => {
-      console.error(`Failed to load plugin: ${props.pluginSrc}`);
-    };
-
-    // Append the script to the container
-    container.appendChild(script);
-
-  }
-});
-</script>
-
-<template>
-  <div>
-    <!-- Scoped container for the plugin -->
-    <div ref="pluginContainer"></div>
-  </div>
-</template>
-
-<style scoped>
-/* Add any styles you want specific to this component */
-</style>
diff --git a/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts b/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
new file mode 100644
index 000000000000..e56404f0c457
--- /dev/null
+++ b/client/src/components/Markdown/Sections/Elements/PluginWrapper.ts
@@ -0,0 +1,61 @@
+import { getAppRoot } from "@/onload/loadConfig"
+
+class PluginWrapper extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        const pluginName = this.getAttribute("plugin-name");
+        const pluginData = this.getAttribute("plugin-data") || "";
+
+        const pluginPath = `${getAppRoot()}static/plugins/visualizations/${pluginName}/static/dist/index`;
+        const pluginSrc = `${pluginPath}.js`;
+        const pluginCss = `${pluginPath}.css`;
+
+        if (!pluginSrc) {
+            console.error("Plugin source not provided!");
+            return;
+        }
+
+        // Create and append the iframe
+        const iframe = document.createElement("iframe");
+        iframe.style.border = "none";
+        iframe.style.width = "100%";
+        iframe.style.height = this.getAttribute("height") || "100%";
+
+        // Load content into the iframe once it's ready
+        iframe.onload = () => {
+            const iframeDocument = iframe.contentDocument;
+            if (!iframeDocument) {
+                console.error("Failed to access iframe document.");
+                return;
+            }
+
+            // Create the container for the plugin
+            const container = iframeDocument.createElement("div");
+            container.id = "app";
+            container.setAttribute("data-incoming", pluginData);
+            iframeDocument.body.appendChild(container);
+
+            // Inject the script tag for the plugin
+            const script = iframeDocument.createElement("script");
+            script.type = "module";
+            script.src = pluginSrc;
+            iframeDocument.body.appendChild(script);
+
+            // Add a CSS link to the iframe document
+            const link = iframeDocument.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = pluginCss;
+            iframeDocument.head.appendChild(link);
+        };
+
+        this.appendChild(iframe);
+    }
+}
+
+// Register the custom element
+customElements.define("plugin-wrapper", PluginWrapper);
+
+export default PluginWrapper;
diff --git a/client/src/components/Markdown/Sections/MarkdownVitessce.vue b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
index 09e723be0585..19c8fe0e88f0 100644
--- a/client/src/components/Markdown/Sections/MarkdownVitessce.vue
+++ b/client/src/components/Markdown/Sections/MarkdownVitessce.vue
@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import PluginContainer from "./Elements/PluginContainer.vue";
+import "./Elements/PluginWrapper";
 
 const props = defineProps<{
     content: string;
 }>();
 
-const spec = computed(() => ({
-    ...JSON.parse(props.content),
+const pluginData = computed(() => ({
+    visualization_config: { 
+        dataset_content: { ...JSON.parse(props.content) },
+    }
 }));
 </script>
 
 <template>
     <div>
-        <PluginContainer plugin-src="/static/plugins/visualizations/vitessce/static/dist/index.js" />
-        {{ spec }}
+        <plugin-wrapper plugin-name="vitessce" :plugin-data="JSON.stringify(pluginData)" height="500px"/>
     </div>
 </template>