Vue 與 Web Components

Web Components 是一組 Web 原生 API 的總稱，允許開發(fā)人員創(chuàng)建可重用的自定義組件。

在 Vue 和 Web Components 大體上是互補的技術(shù)。Vue 能很好地解析和創(chuàng)建自定義元素。不論是在將自定義元素整合到已有的 Vue 應用中，還是使用 Vue 構(gòu)建和分發(fā)自定義元素，你都能獲得很好的支持。

在 Vue 中使用自定義元素

Vue 在 Custom Elements Everywhere 測試中獲得了 100% 的完美分數(shù)。Vue 應用程序中解析出的自定義元素大體上和原生 HTML 元素相同，但需要牢記以下幾點：

跳過組件的解析

默認情況下，Vue 會優(yōu)先嘗試將一個非原生的 HTML 標簽解析為一個注冊的 Vue 組件，如果失敗則會將其渲染為自定義元素。這種行為會導致在開發(fā)模式下的 Vue 發(fā)出“failed to resolve component”的警告。如果你希望 Vue 能將某些確切的元素作為自定義元素處理并跳過組件解析，請指定 compilerOptions.isCustomElement 選項。

如果你正在構(gòu)建步驟中使用 Vue，則此選項需要通過構(gòu)建配置傳遞，因為這是一個編譯時選項。

Vite 配置示例

// vite.config.jsimport vue from '@vitejs/plugin-vue'
export default {  plugins: [    vue({      template: {        compilerOptions: {          // 將所有包含短橫線的標簽作為自定義元素處理          isCustomElement: tag => tag.includes('-')        }      }    })  ]}

使用 Vue 構(gòu)建自定義元素

自定義元素的一大好處就是它們可以與任何框架一起使用，甚至可以在沒有框架的情況下使用。當你需要向可能使用不同前端技術(shù)棧的終端用戶分發(fā)組件時，或者希望向最終應用程序隱藏其所用組件的實現(xiàn)細節(jié)時，使用自定義元素非常適合。

defineCustomElement

Vue 支持使用 defineCustomElement 方法創(chuàng)建自定義元素，并且使用與 Vue 組件完全一致的 API。該方法接受與 defineComponent 相同的參數(shù)，但是會返回一個擴展自 HTMLElement 的自定義元素構(gòu)造函數(shù)。

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)  }))