GoogleMap doesn't render when embedded in custom element

[kerekes]

I'm turning a Vue component into a custom element (tag). The GoogleMap component stops working when I embed I use it inside a custom element. Why is that?

mount Version (works)

When App users GoogleMap, this works:

main.js

import SiteMap from "@/elements/App";
import {createApp} from "vue";
createApp(App).mount('#app');

index.html

...
<div id="app"></div>
...

custom'Element Version (breaks) But when embedding it as a custom element, the map doesn't render:

main.js

import App from "@/elements/App";
import {defineCustomElement} from "vue";
customElements.define('my-map-component', defineCustomElement(App));

index.html

...
<my-map-component/>
...

[HusamElbashir]

Hi @kerekes

Can you please share a reproduction? You can use https://vite.new/vue

[kerekes]

@HusamIbrahim here's you are: https://stackblitz.com/edit/vitejs-vite-a12ajq?file=src/components/MapComponent.vue

I left my development API key in so it's more convenient for you. Will deactivate it sometime in the future.

[HusamElbashir]

It appears that the styles of the GoogleMap component aren't being injected in the custom element and the map has 0 height. I'm not too familiar with web components/custom elements but will treat this as a potential bug for now.

You can work around the issue by explicitly defining the map styles:

customElements.define(
  'map-tag',
  defineCustomElement({
    ...MapComponent,
    styles: ['.mapdiv { width: 100%; height: 100% }'],
  })
);

https://stackblitz.com/edit/vitejs-vite-u9fjpv?file=src%2Fmain.js

[HusamElbashir]

So this seems to be an upstream issue https://github.com/vuejs/core/issues/4662