test: test using vue sfcs as custom elements (#4717)

packages/playground/vue/CustomElement.ce.vue

@@ -0,0 +1,26 @@
+<template>
+  <h2>Custom Element</h2>
+  <button class="custom-element" type="button" @click="state.count++">
+    {{ label }}: {{ state.count }}
+  </button>
+</template>
+
+<script setup>
+import { defineProps, reactive, onBeforeMount } from 'vue'
+
+defineProps({
+  label: String
+})
+
+const state = reactive({ count: 0 })
+
+onBeforeMount(() => {
+  state.count = 1
+})
+</script>
+
+<style scoped>
+.custom-element {
+  color: green;
+}
+</style>

packages/playground/vue/__tests__/vue.spec.ts

@@ -211,3 +211,11 @@ describe('ref transform', () => {
     expect(await page.textContent('.ref-transform')).toMatch('1')
   })
 })
+
+describe('custom element', () => {
+  test('should work', async () => {
+    await page.click('.custom-element')
+    expect(await page.textContent('.custom-element')).toMatch('count: 2')
+    expect(await getColor('.custom-element')).toBe('green')
+  })
+})

packages/playground/vue/index.html

@@ -1,7 +1,10 @@
 <div id="app"></div>
 <script type="module">
-  import { createApp } from 'vue'
+  import { createApp, defineCustomElement } from 'vue'
   import Main from './Main.vue'
+  import CustomElement from './CustomElement.ce.vue'
 
   createApp(Main).mount('#app')
+  customElements.define('custom-element', defineCustomElement(CustomElement))
 </script>
+<custom-element label="count"></custom-element>