Vue 与 Web Components

Web Components 是一组 Web 原生 API 的总称，允许开发人员创建可重用的自定义组件。

在 Vue 和 Web Components 大体上是互补的技术。Vue 能很好地解析和创建自定义元素。不论是在将自定义元素整合到已有的 Vue 应用中，还是使用 Vue 构建和分发自定义元素，你都能获得很好的支持。

在 Vue 中使用自定义元素

Vue 在 Custom Elements Everywhere 测试中获得了 100% 的完美分数。Vue 应用程序中解析出的自定义元素大体上和原生 HTML 元素相同，但需要牢记以下几点：

跳过组件的解析

默认情况下，Vue 会优先尝试将一个非原生的 HTML 标签解析为一个注册的 Vue 组件，如果失败则会将其渲染为自定义元素。这种行为会导致在开发模式下的 Vue 发出“failed to resolve component”的警告。如果你希望 Vue 能将某些确切的元素作为自定义元素处理并跳过组件解析，请指定 compilerOptions.isCustomElement 选项。

如果你正在构建步骤中使用 Vue，则此选项需要通过构建配置传递，因为这是一个编译时选项。

Vite 配置示例

// vite.config.jsimport vue from '@vitejs/plugin-vue'
export default {  plugins: [    vue({      template: {        compilerOptions: {          // 将所有包含短横线的标签作为自定义元素处理          isCustomElement: tag => tag.includes('-')        }      }    })  ]}

使用 Vue 构建自定义元素

自定义元素的一大好处就是它们可以与任何框架一起使用，甚至可以在没有框架的情况下使用。当你需要向可能使用不同前端技术栈的终端用户分发组件时，或者希望向最终应用程序隐藏其所用组件的实现细节时，使用自定义元素非常适合。

defineCustomElement

Vue 支持使用 defineCustomElement 方法创建自定义元素，并且使用与 Vue 组件完全一致的 API。该方法接受与 defineComponent 相同的参数，但是会返回一个扩展自 HTMLElement 的自定义元素构造函数。

my-vue-element>

import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({  // 在此提供正常的 Vue 组件选项  props: {},  emits: {},  template: `...`,
  // defineCustomElement 独有特性: CSS 会被注入到隐式根 (shadow root) 中  styles: [`/* inlined css */`]})
// 注册自定义元素// 注册完成后，此页面上的所有的 `` 标签会被更新customElements.define('my-vue-element', MyVueElement)
// 你也可以编程式地实例化这个元素：// (只能在注册后完成此操作)document.body.appendChild(  new MyVueElement({    // initial props (optional)  }))