这个错误 Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth') 本质上是vue-yandex-maps在尝试获取地图容器尺寸时，找不到对应的DOM元素。根源在于Web Component（defineCustomElement）环境下的几个关键配置缺失和DOM隔离问题，下面逐一拆解：

1. 缺失isCustomElement配置，导致Vue错误解析Yandex Map组件 #

第一个普通Vue项目里，你配置了 app.config.isCustomElement = (tag) => tag.startsWith('y');，这个配置告诉Vue：以y开头的标签是原生自定义元素，不要把它们当成Vue组件去编译。但在第二个Web Component项目中，你在创建app实例时完全漏掉了这个配置——Vue会把<yandex-map>和<ymap-marker>当成未注册的Vue组件处理，渲染出的DOM结构异常，最终导致地图找不到它的容器元素。

修复方法：在defineCustomElementWithStyles.js的app实例初始化时添加这个配置：

const app = createApp()
// 新增这行配置，告诉Vue忽略以y开头的自定义元素
app.config.isCustomElement = (tag) => tag.startsWith('y');
// 安装插件
plugins.forEach(app.use)

2. Web Component的Shadow DOM隔离导致地图无法访问容器 #

当你使用defineCustomElement创建Web Component时，Vue默认会把组件内容挂载到Shadow DOM中。而vue-yandex-maps的内部逻辑可能没有考虑Shadow DOM的隔离，它尝试通过全局DOM查询获取容器元素时会失败，或者在容器元素还没被挂载到Shadow DOM时就执行了尺寸计算。

修复方法：

• 方案一：禁用Shadow DOM（简单直接），在定义自定义元素时添加shadowRoot: false选项：

customElements.define(
  'app-root',
  defineCustomElement(App, {
    plugins: [store, router, ymapPlugin],
    // 禁用Shadow DOM，避免DOM隔离问题
    shadowRoot: false
  })
)

• 方案二：如果必须保留Shadow DOM，需要确保vue-yandex-maps能在Shadow DOM环境下工作。你可以尝试给<yandex-map>组件添加ref，在组件的mounted钩子中手动初始化地图，确保容器元素已经存在于Shadow DOM中。

3. 样式隔离导致地图容器高度异常（潜在问题） #

虽然你给.ymap-container加了高度样式，但在Shadow DOM环境下，这个样式可能无法穿透到vue-yandex-maps的组件内部，导致容器高度为0，也会引发类似的尺寸读取错误。你可以通过以下方式确保样式生效：

• 使用:deep()穿透Shadow DOM（如果保留Shadow DOM的话）：

<style>
:deep(.ymap-container) {
  height: 600px;
}
</style>

• 或者在禁用Shadow DOM后，样式会正常生效。

额外验证点 #

确保vue-yandex-maps的版本支持Vue 3的Web Component环境，有些旧版本的第三方库可能没有适配defineCustomElement的场景，如果上面的修复都无效，可以尝试升级vue-yandex-maps到最新版本。

内容的提问来源于stack exchange，提问作者Andreas Hunter