0
74
VistasRepresentación de una aplicación Vue en Shadow DOM usando un elemento personalizado
Así que tengo una aplicación Vue 3 con todas las funciones (enrutamiento, etc.) que necesito incrustar en una página aleatoria en algún lugar, pero no quiero usar un iframe por varias razones, así que estoy buscando lograr esto usando Shadow DOM y Elemento personalizado .
La forma en que pensé que funcionaría:
- ✅ Cree la aplicación Vue
- ✅ Publicar la carpeta
dist - ✅ Crear un elemento personalizado
- ✅ Crear Shadow DOM en el
constructor - ✅ Cargar
dist/index.html - ❌ La aplicación Vue se renderiza en Shadow DOM
... excepto que no lo hace. Todo funciona técnicamente, pero la aplicación Vue no funciona en absoluto.
¿Qué me estoy perdiendo?
Mi intento: https://stackblitz.com/edit/javascript-7trm5i?devtoolsheight=33&file=index.html
Editado para agregar:
- El mismo resultado incluso si implemento la aplicación en un servicio como Vercel y lo uso como
src.
2 Respuestas
Responde la pregunta0
Esta no es una forma correcta de hacerlo. Está utilizando fetch para obtener la página HTML. La página HTML tiene las siguientes etiquetas de script y estilo:
<!DOCTYPE html> <html lang="en" data-theme="bumblebee"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue Cart</title> <script type="module" crossorigin src="/assets/index.0f5a3d92.js"></script> <link rel="modulepreload" href="/assets/vendor.ab0eb239.js"> <link rel="stylesheet" href="/assets/index.8fd7686d.css"> </head> <body> <div id="app"></div> </body> </html> Mire este script: <script type="module" crossorigin src="/assets/index.0f5a3d92.js"> .
Cuando se agrega esta etiqueta a través de innerHTML , el navegador intentará encontrar el archivo index.0f5a3d92.js utilizando el dominio desde el que está sirviendo la página principal. No está preguntando el dominio de donde está obteniendo este HTML. Lo ideal debería ser esto:
https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js
Pero está haciendo una llamada a esto:
https://stackblitz.com/assets/index.0f5a3d92.js
Deberá volver a escribir el atributo src antes de agregarlo a HTML.
En una nota al margen, este es un anti-patrón de lo que está tratando de hacer. El componente web no es un sustituto real de iFrame . Además, una página debe tener solo una etiqueta de head de nivel superior. Está introduciendo múltiples etiquetas de cabeza y cuerpo aquí. El navegador lo manejará en silencio , pero aún es antipatrón.
La forma correcta de hacer esto es agrupar su aplicación Vue con una definición de elemento personalizada. Luego cargue este script incluido en algún CDN. A partir de ahí, agréguelo como un script en la página y el elemento debería mostrarse cuando el navegador encuentre el elemento personalizado.
0
No puede tener varias etiquetas html, cuerpo y encabezado en un solo documento, por lo que el analizador html ignora las etiquetas html, encabezado y cuerpo de la aplicación Vue.
Antes:
<!DOCTYPE html> <html lang="en" data-theme="bumblebee"> <head> <meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue Cart</title> <script type="module" crossorigin src="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js"></script> <link rel="modulepreload" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/vendor.ab0eb239.js"> <link rel="stylesheet" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.8fd7686d.css"> </head> <body> <div id="app"></div> </body> </html>Después de analizar:
<meta charset="UTF-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue Cart</title> <script type="module" crossorigin src="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js"></script> <link rel="modulepreload" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/vendor.ab0eb239.js"> <link rel="stylesheet" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.8fd7686d.css"> <div id="app"></div>Entonces, en última instancia, la estructura html cambia de la original con la que Vue Virtual DOM no puede funcionar.
Así que no creo que puedas usar Shadow DOM como un iframe.