因為vue在設計時有參考react，所以在使用web component和被web component使用時的方法大同小異。這篇文章

Vue

雖說Vue的語法在許多地方有參考web component，但也因為語法太像了，在使用web component上相比react反而要麻煩一點。

因為官網的說明還算完整，我就不特別貼程式碼了。

在vue 中註冊web component

如果有在使用vue的單文件模式的話，一定有注意到，在單文件中使用vue 的component也是使用'-'。這就表示vue在解析單文件時沒辦法分辨該模組是不是web component，會全部當成vue的component來解析。

為了讓vue能使用web component，唯一的解法是告訴vue的解析器那些web component的名稱，讓vue的解析器不會當成vue的組件來讀取。官網中有提出了三個方案，提示了在vue的三種使用場合中註冊web component的方法。

react沒有這個問題是因為，react的組件都是使用大寫開頭。

使用web component的事件

就使用web component內部方法這件事上，vue和react一樣，都是要先綁ref，再用ref來使用內部方法。

<my-vue ref="my-com"></my-vue>

this.$refs['my-com'].focus()

web component中使用 vue

在web component中使用vue也還算簡單，使用createApp把節點加到shadow DOM（vue3），再用render方法渲染vue component就可以了。

const { createApp } = Vue

class MyVue extends HTMLElement {
    root = null
    constructor() {
        super();
        this.root = this.attachShadow({mode: 'open'});
        this.root.appendChild(this.render())
    }
    render() {
        const root = document.createElement('div');
        const app = {
          data() {
            return { count: 0 }
              },
              template: `<div>count is {{ count }}</div>`
            }
            return root
        }
        createApp(app).mount(root)
        return root
}
customElements.define('my-vue', MyVue);

使用 vue寫web component

雖然官網有提出這個用法，但我是認為，少量的使用web component根本不需要套件；而如果要做libary，使用lit-component之類的套件來做會更方便。