Make it possible to register global components for use in defineCustomElement

[AlbertBrand]

What problem does this feature solve?

We have a large component that uses global components to lessen the burden of writing imports for components. We wrap this component in a web component for a while now with a piece of custom code, and we want to use the new defineCustomElement for it. However, the new API doesn't create an app context but 'simply' renders the root component. Which makes it impossible to have global components inside web components (it seems).

Is there a way to register global components for use inside web components, or a way of passing in an existing app context, or get a hold of an app context during creation?

What does the proposed API look like?

// this is inspired on how our current API looks like:
const customElement = defineCustomElement(VueComponent, (app) => {
  provideContexts(app);
  includeGlobalComponents(app);
});

window.customElements.define( // etc

[gnuletik]

Your issue seems to address two issues :

• app context
• global components

For app context, you can use provide in a root web component and use inject inside your child components.

However, if you use intermediate Vue components (which are not rendered as Custom Elements), the inject API would fail because the Provide/Inject API only works between Vue's Custom Elements. See https://github.com/vuejs/vue-next/issues/4476 Check my comment here for an example : https://github.com/vuejs/vue-next/issues/4476#issuecomment-921838071

Being able to register global components would be nice though!

[Atlas-lili]

Can defineCustomElement accept a Vue App callback function. I need to export a large Vue project as a WebComponent to a React environment. The defineCustomElement is not ideal in terms of internal and external style isolation and the use of Vue middleware.

[yyx990803]

Closing as duplicate / subset of #4635