globalProperties and defineCustomElement

[ex0ns]

Hello

I need to use a Vue.js library as webcomponent, I have used the defineCustomElement method successfully so far, however one of the component (that I do not control), is using an variable that is coming from the app.config.globalProperties (injected by a plugin).

core/packages/runtime-dom/src/apiCustomElement.ts

Line 144 in fc79029

export function defineCustomElement(

I tried to inject the same variable inside component created by defineCustomElement but no luck so far.
From what I have seen, if I was able to inject this variable into an appContext.config.globalProperties it would work, however I could not find an entry point for that.
My idea was to set vnode.appContext so it would be picked up here:

core/packages/runtime-core/src/component.ts

Lines 491 to 494 in fc79029

	const appContext =
	(parent ? parent.appContext : vnode.appContext) || emptyAppContext
	const instance: ComponentInternalInstance = {

But I was not able to, because the VNode in the defineCustomElement in defined as

core/packages/runtime-dom/src/apiCustomElement.ts

Lines 362 to 364 in fc79029

	private _createVNode(): VNode<any, any> {
	const vnode = createVNode(this._def, extend({}, this._props))
	if (!this._instance) {

which does not expose any other configuration (except props)

Is there a way to achieve what I want to do ? I have tried to extends the defineCustomElement with my own elemnt in order to implement some callback but I still can't make it work:

const CustomElement = defineCustomElement(constructor);
return class CustomElementWithStyle extends CustomElement {
  constructor(props) {
     super(props); 
     // retrieve vnode or instance here ?
  }
}

[ex0ns]

I was able to do what I wanted by extending the CustomElement and monkey patching the _update() method

_update() {
  const vnode = this._createVNode();
  vnode.appContext = this.createAppContext();
  vnode.appContext.config.globalProperties.GlobalAttr = GlobalAttr;
  render(vnode, this.shadowRoot!);
}

[luizloja]

This is my solution to use primevue in web-components.
Thanks for the idea @ex0ns. You are the man.
This is my main.js file.

import { defineCustomElement} from "vue";
import VCard from "./components/vcard.ce.vue";
import { defaultOptions } from 'primevue/config';

//This function sets the $primevue configuration
const defineCustomElementForPrimeVue = (component) => {
  const element = defineCustomElement(component);
  return class CustomElementWithStyle extends element {
    constructor(props) {
      super(props); 
   }
   _createVNode() {
    const node = super._createVNode()
    node.appContext = {
      app: null,
      config: {
        isNativeTag: function(){return false},
        performance: false,
        globalProperties: {},
        optionMergeStrategies: {},
        errorHandler: undefined,
        warnHandler: undefined,
        compilerOptions: {},
      },
      mixins: [],
      components: {},
      directives: {},
      provides: Object.create(null),
      optionsCache: new WeakMap(),
      propsCache: new WeakMap(),
      emitsCache: new WeakMap(),
    }
    node.appContext.config.globalProperties.$primevue = {config: defaultOptions} 
    return node
   }
  }
}


const element = defineCustomElementForPrimeVue(VCard)


customElements.define("v-card", element);