From: Evan You <evan@vuejs.org>
Date: Tue, 6 Aug 2024 07:37:28 +0000 (+0800)
Subject: feat(custom-element): support passing custom-element-specific options via 2nd argumen... 
X-Git-Tag: v3.5.0-beta.1~25
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=60a88a2b129714186cf6ba66f30f31d733d0311e;p=thirdparty%2Fvuejs%2Fcore.git

feat(custom-element): support passing custom-element-specific options via 2nd argument of defineCustomElement
---

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 58de181054..9378d72193 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 4bc0b29242..964f43441e 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 7acaa98c9d..e55767b765 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