After creating the renderComponent method to display a webcomponent, I attempted to use it in my componentView.vue file.
export function renderComponent(el: Element, component: Component,props: VNodeProps,appContext: AppContext){
let vnode: VNode | undefined = createVNode(component, props)
vnode.appContext = { ...appContext }
render(vnode, el)
return ()=> {
render(null, el)
vnode = undefined
}
}
In my componentView.vue file, I called the addComponent function like this:
const addComponent = async(component: ComponentRegistryItem) => {
destroyComp = renderComponent(
containerDiv.value,
(await import (/* @vite-ignore */ component.frontendUrl)),
{},
appContext);
};
This is how the template looks:
<li v-for="component in group">
<button @click="addComponent(component)">{{ component.tagName }}</button>
<div ref="containerDiv"></div>
</li>
The component.frontendUrl points to a JavaScript webcomponent that extends HTMLElement (non-Vue). However, when clicking the button, nothing happens and no errors are displayed.
Is there a way to render a non-Vue component using this setup?
UPDATE:
Upon logging the imported component, I noticed this output:
Object { … }
Symbol(Symbol.toStringTag): "Module"