Vue 3：为什么 vue yandex 地图包在 vue 3 中无法使用 DefineCustomElement 功能？

Question

我在 vue 3 中有 2 个使用vue yandex 地图的项目：

第一个项目

演示第一个项目，其中使用 vue yandex 地图。在这个项目包中注册如下：

从文件中main.js注册 vue-yandex-maps组件的代码js：

const { createApp } = require('vue');
import App from './App.vue';
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js';

const app = createApp(App);

app.config.isCustomElement = (tag) => tag.startsWith('y'); // <= This is doesn't work
app.use(ymapPlugin);
app.mount('#app');

MapComponent.vue使用 vue-yandex-maps 包的代码：

const { createApp } = require('vue');
import App from './App.vue';
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js';

const app = createApp(App);

app.config.isCustomElement = (tag) => tag.startsWith('y'); // <= This is doesn't work
app.use(ymapPlugin);
app.mount('#app');

App.vue使用组件的代码MapComponent：

<template>
  <yandex-map :coords="coords">
    <ymap-marker
      marker-id="123"
      :coords="coords"
      :marker-events="['click']"
    ></ymap-marker>
  </yandex-map>
</template>

<script>
export default {
  name: 'MapComponent',
  setup() {
    return {
      coords: [54, 39],
    };
  },
};
</script>

第二个项目

演示第二个项目，其中使用了vue 版本3.2中的新功能DefineCustomElement并在使用包时收到错误消息：vue-yandex-maps

未捕获的类型错误：无法读取 null 的属性（读取“offsetWidth”）

main.js从文件注册vue-yandex-maps组件的代码js：

import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
import store from './store'
import router from './router'
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js'

customElements.define(
  'app-root',
  defineCustomElement(App, {
    plugins: [store, router, ymapPlugin],
  })
)

代码 defineCustomElementWithStyles.js：

import { defineCustomElement as VueDefineCustomElement, h, createApp, getCurrentInstance } from 'vue'

const getNearestElementParent = (el) => {
  while (el?.nodeType !== 1 /* ELEMENT */) {
    el = el.parentElement
  }
  return el
}

export const defineCustomElement = (component, { plugins = [] }) =>
  VueDefineCustomElement({
    props: component.props,
    setup(props) {
      const app = createApp()

      // install plugins
      plugins.forEach(app.use)

      app.mixin({
        mounted() {
          const insertStyles = (styles) => {
            if (styles?.length) {
              this.__style = document.createElement('style')
              this.__style.innerText = styles.join().replace(/\n/g, '')
              getNearestElementParent(this.$el).prepend(this.__style)
            }
          }

          // load own styles
          insertStyles(this.$?.type.styles)

          // load styles of child components
          if (this.$options.components) {
            for (const comp of Object.values(this.$options.components)) {
              insertStyles(comp.styles)
            }
          }
        },
        unmounted() {
          this.__style?.remove()
        },
      })

      const inst = getCurrentInstance()
      Object.assign(inst.appContext, app._context)
      Object.assign(inst.provides, app._context.provides)
      console.log({ props })
      return () => h(component, props)
    },
  })

Home.ce.vue使用组件的代码MapComponent：

<template>
  <div id="app">
    <MapComponent />
  </div>
</template>

<script>
import MapComponent from './components/MapComponent.vue';

export default {
  name: 'App',
  components: {
    MapComponent,
  },
};
</script>

MapComponent.ce.vue使用包的代码vue-yandex-maps：

import { defineCustomElement } from './defineCustomElementWithStyles'
import App from './App.ce.vue'
import store from './store'
import router from './router'
import ymapPlugin from 'vue-yandex-maps/dist/vue-yandex-maps.esm.js'

customElements.define(
  'app-root',
  defineCustomElement(App, {
    plugins: [store, router, ymapPlugin],
  })
)

问题

我使用with的第二个项目中哪里有错误？vue-yandex-mapsdefineCustomElement

Answer 1

vue-yandex-maps 使用随机生成的 ID渲染一个地图容器，该 ID传递给ymaps.Map构造函数，稍后使用它来查询document元素。不幸的是，地图容器呈现在app-root自定义元素的 Shadow DOM 内部，对查询隐藏document。因此document.querySelector()返回null，并且ymaps.Map代码尝试通过引用获取容器的大小null，从而导致您观察到的错误。

您必须vue-yandex-maps自行修补，或提交GitHub 问题来请求功能更改，其中您可以传入地图容器元素（来自自定义元素的 Shadow DOM）而不是 ID。看起来ymaps.Map已经接受元素或字符串 ID，因此不需要进行其他更改。