白云苍狗
·
使用 Vue3 构建 Web Components
内容提要
本文讨论了如何使用 Vue 3.2+ 构建 Web Components，重点介绍了 `defineCustomElement` 方法及其特点，包括属性映射、事件处理和样式隔离等。尽管存在一些挑战，这种方法适合构建简单的跨框架插件。
关键要点
-
Vue 3.2+ 开始支持将组件构建成 Web Components，使用 defineCustomElement 方法。
-
defineCustomElement 方法将 Vue 组件转换为自定义元素，支持属性映射和事件处理。
-
HTML 属性会被映射到自定义元素的对象属性上，复杂类型需设置到 DOM property 上。
-
自定义元素中的事件通过 this.$emit 或 setup 中的 emit 发出，作为原生 CustomEvents 处理。
-
子组件的样式默认不会被抽离，需要手动注入到父组件中。
-
可以通过扩展 defineCustomElement 方法，使组件内的方法可以直接通过 DOM 调用。
-
构建 Web Components 的方法适合简单的跨框架插件，但仍存在一些挑战。
延伸解读
Web Components 的优势与局限
使用 Vue 3.2+ 构建 Web Components 可以有效避免样式冲突，适合开发跨框架的插件。然而，当前的实现仍存在一些局限性，例如子组件样式无法自动抽离，开发者需手动处理。这意味着在复杂项目中，开发者需要额外的工作来确保样式的正确性。
事件处理的注意事项
在自定义元素中，事件通过 this.$emit 或 setup 中的 emit 发出，作为原生 CustomEvents 处理。开发者需注意，附加的事件参数会以数组形式暴露在 CustomEvent 对象的 details 属性上，这可能影响事件的使用方式，尤其是在处理复杂交互时。
属性映射的复杂性
Vue 会将 HTML 属性映射到自定义元素的对象属性上，但复杂类型的属性需要特别处理。开发者应关注属性类型的转换，确保在使用时不会出现类型不匹配的问题，尤其是在处理非基础类型时，需将其设置为 DOM property。
延伸问答
如何使用 Vue 3.2+ 构建 Web Components？
可以使用 `defineCustomElement` 方法将 Vue 组件转换为自定义元素，支持属性映射和事件处理。
defineCustomElement 方法的主要特点是什么？
该方法支持属性映射、事件处理和样式隔离，能够将 Vue 组件转换为自定义元素。
在构建 Web Components 时，如何处理子组件的样式？
子组件的样式默认不会被抽离，需要手动注入到父组件中。
使用 defineCustomElement 方法时，如何处理事件？
可以通过 `this.$emit` 或在 setup 中的 emit 发出事件，事件会被调度为原生 CustomEvents。
构建 Web Components 存在什么挑战？
尽管可以构建简单的跨框架插件，但在样式隔离和方法调用等方面仍存在一些挑战。
如何将组件内的方法暴露给 DOM 调用？
可以扩展 `defineCustomElement` 方法，将组件内的方法绑定到自定义元素上，以便直接通过 DOM 调用。
