Sé que hay un montón de preguntas similares a esta, pero por lo que he visto, no parecen funcionar. Vengo de un entorno de reacción y estoy explorando Vue ahora, así que me disculpo si mis expectativas son incorrectas.

Mi ejemplo se puede definir simplemente como:

 <template> <div class="test" @click="passedFunction">Click me</div> </template> <script> export default { name: 'TestComponent', props: { passedFunction: { type: Function, default: () => {}, } } } </script> <style scoped> .test { background-color: blue; } </style>

Me gustaría poder hacer simplemente:

 import TestComponent from 'TestComponent.vue'; ... methods: { testComponentHandler: function() { console.log('It worked!'); }, addComponent: function() { const targetContainer = document.getElementById('target-div'); const newComponent = new TestComponent({ passedFunction: this.testComponentHandler }); targetContainer.appendChild(newComponent); }, }

Casi pude hacerlo funcionar así:

 const testComponentElement = defineCustomElement(TestComponent); customElements.define('test-component', testComponentElement); const newTestComponent = new testComponentElement({ passedFunction: this.testComponentHandler, }); target.appendNode(newTestComponent);

Esto agrega el elemento, pero está dentro de una etiqueta (según lo definido por los nuevos elementos personalizados) y está dentro de un '#shadow-root', lo que parece significar que el componente CSS no funciona en absoluto. Además, no puedo acceder a ningún elemento desde dentro de shadow-root y no puedo acceder a elementos dentro de shadow-root desde fuera de él, es como si solo existiera el elemento externo.

Siento que me falta algo... ¿algún aporte?

Editar: parte agregada sobre no poder acceder dentro/fuera de shadow-root.