From 60a88a2b129714186cf6ba66f30f31d733d0311e Mon Sep 17 00:00:00 2001
From: Evan You <evan@vuejs.org>
Date: Tue, 6 Aug 2024 15:37:28 +0800
Subject: [PATCH] feat(custom-element): support passing custom-element-specific
 options via 2nd argument of defineCustomElement

---
 .../__tests__/customElement.spec.ts           | 22 +++++++++++--------
 packages/runtime-dom/src/apiCustomElement.ts  |  3 +++
 packages/runtime-dom/src/index.ts             |  1 +
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 58de18105..9378d7219 100644
--- a/packages/runtime-dom/__tests__/customElement.spec.ts
+++ b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -898,16 +898,20 @@ describe('defineCustomElement', () => {
     })
 
     const toggle = ref(true)
-    const ES = defineCustomElement({
-      shadowRoot: false,
-      render() {
-        return [
-          renderSlot(this.$slots, 'default'),
-          toggle.value ? renderSlot(this.$slots, 'named') : null,
-          renderSlot(this.$slots, 'omitted', {}, () => [h('div', 'fallback')]),
-        ]
+    const ES = defineCustomElement(
+      {
+        render() {
+          return [
+            renderSlot(this.$slots, 'default'),
+            toggle.value ? renderSlot(this.$slots, 'named') : null,
+            renderSlot(this.$slots, 'omitted', {}, () => [
+              h('div', 'fallback'),
+            ]),
+          ]
+        },
       },
-    })
+      { shadowRoot: false },
+    )
     customElements.define('my-el-shadowroot-false-slots', ES)
 
     test('should render slots', async () => {
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
index 4bc0b2924..964f43441 100644
--- a/packages/runtime-dom/src/apiCustomElement.ts
+++ b/packages/runtime-dom/src/apiCustomElement.ts
@@ -141,6 +141,7 @@ export function defineCustomElement<
         Exposed
       >
     >,
+  extraOptions?: CustomElementOptions,
 ): VueElementConstructor<ResolvedProps>
 
 // overload 3: defining a custom element from the returned value of
@@ -149,6 +150,7 @@ export function defineCustomElement<
   T extends DefineComponent<any, any, any, any>,
 >(
   options: T,
+  extraOptions?: CustomElementOptions,
 ): VueElementConstructor<
   T extends DefineComponent<infer P, any, any, any>
     ? ExtractPropTypes<P>
@@ -165,6 +167,7 @@ export function defineCustomElement(
   hydrate?: RootHydrateFunction,
 ): VueElementConstructor {
   const Comp = defineComponent(options, extraOptions) as any
+  if (isPlainObject(Comp)) extend(Comp, extraOptions)
   class VueCustomElement extends VueElement {
     static def = Comp
     constructor(initialProps?: Record<string, any>) {
diff --git a/packages/runtime-dom/src/index.ts b/packages/runtime-dom/src/index.ts
index 7acaa98c9..e55767b76 100644
--- a/packages/runtime-dom/src/index.ts
+++ b/packages/runtime-dom/src/index.ts
@@ -245,6 +245,7 @@ export {
   useShadowRoot,
   VueElement,
   type VueElementConstructor,
+  type CustomElementOptions,
 } from './apiCustomElement'
 
 // SFC CSS utilities