feat(custom-element): support passing custom-element-specific options…

… via 2nd argument of defineCustomElement
vuejs · Aug 6, 2024 · 60a88a2 · 60a88a2
1 parent 56c76a8
commit 60a88a2
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git 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
@@ -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
@@ -245,6 +245,7 @@ export {
   useShadowRoot,
   VueElement,
   type VueElementConstructor,
+  type CustomElementOptions,
 } from './apiCustomElement'
 
 // SFC CSS utilities