Open kerekes opened 2 years ago
Hi @kerekes
Can you please share a reproduction? You can use https://vite.new/vue
@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.
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
So this seems to be an upstream issue https://github.com/vuejs/core/issues/4662
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
usersGoogleMap
, this works:main.js
index.html
custom'Element Version (breaks) But when embedding it as a custom element, the map doesn't render:
main.js
index.html