Necesito insertar mi componente en un DOM oculto en una página web sobre la que no tengo control.

Todo lo que tengo acceso en la página web es el siguiente div:

 <div id="freshie"> <compo></compo> </div>

Tengo un componente Vue 2 con una plantilla que he definido así:

 Vue.component('compo', { delimiters: ['${', '}'], data: function () { return { someData: "hi" } }, template: ` <div> <p>If this works I'll be amazed</p> </div> ` })

Estoy tratando de crear un DOM en la sombra con lo siguiente:

 let treeHead = document.querySelector("#freshie"); #this selects the div on the webpage let holder = document.createElement("div"); #I thought this selects my component?? let shadow = treeHead.attachShadow({mode: 'open'}); #this sets up the shadow???? shadow.appendChild(holder); #this places the shadow?? let vueFresh = new Vue({ el: holder, });

Pero esto básicamente no hace nada, sin errores, sin componentes. Así que tengo algo mal, simplemente no tengo idea de qué es eso. ¿Alguna idea?

Puedo insertar este componente en la página web, con el siguiente código, no hay problema. Sin embargo, hereda todo el CSS de la página web y todo está conectado.

 var vueFreshie = new Vue({ el: '#freshie' })