feat(custom-element): support passing custom-element-specific options via 2nd argumen...

diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
index 58de18105488d3a7fcd77717d152c883883de6d1..9378d721930713f3cc0c44b5d3442aef530783f0 100644 (file)
--- 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 4bc0b2924212e549e69ea7169186e98de93ea0b7..964f43441e8e4073cb3f7fdc2c1b79bb3a8e0fbc 100644 (file)
--- 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 7acaa98c9d5f2c53c45506d9813a49721c94bfeb..e55767b7654f1f5efcc92de4a02732c4f814caaa 100644 (file)
--- 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