feat(runtime-dom): support passing initial props to custom element constructor

Author: yyx990803

packages/runtime-dom/__tests__/customElement.spec.ts

@@ -17,7 +17,15 @@ describe('defineCustomElement', () => {
 
   describe('mounting/unmount', () => {
     const E = defineCustomElement({
-      render: () => h('div', 'hello')
+      props: {
+        msg: {
+          type: String,
+          default: 'hello'
+        }
+      },
+      render() {
+        return h('div', this.msg)
+      }
     })
     customElements.define('my-element', E)
 
@@ -30,13 +38,13 @@ describe('defineCustomElement', () => {
     })
 
     test('should work w/ manual instantiation', () => {
-      const e = new E()
+      const e = new E({ msg: 'inline' })
       // should lazy init
       expect(e._instance).toBe(null)
       // should initialize on connect
       container.appendChild(e)
       expect(e._instance).toBeTruthy()
-      expect(e.shadowRoot!.innerHTML).toBe(`<div>hello</div>`)
+      expect(e.shadowRoot!.innerHTML).toBe(`<div>inline</div>`)
     })
 
     test('should unmount on remove', async () => {

packages/runtime-dom/src/apiCustomElement.ts

@@ -23,8 +23,8 @@ import {
 import { camelize, extend, hyphenate, isArray, toNumber } from '@vue/shared'
 import { hydrate, render } from '.'
 
-type VueElementConstructor<P = {}> = {
-  new (): VueElement & P
+export type VueElementConstructor<P = {}> = {
+  new (initialProps?: Record<string, any>): VueElement & P
 }
 
 // defineCustomElement provides the same type inference as defineComponent
@@ -134,8 +134,8 @@ export function defineCustomElement(
     static get observedAttributes() {
       return attrKeys
     }
-    constructor() {
-      super(Comp, attrKeys, propKeys, hydate)
+    constructor(initialProps?: Record<string, any>) {
+      super(Comp, initialProps, attrKeys, propKeys, hydate)
     }
   }
 
@@ -163,10 +163,6 @@ const BaseClass = (
 ) as typeof HTMLElement
 
 export class VueElement extends BaseClass {
-  /**
-   * @internal
-   */
-  _props: Record<string, any> = {}
   /**
    * @internal
    */
@@ -178,6 +174,7 @@ export class VueElement extends BaseClass {
 
   constructor(
     private _def: ComponentOptions & { styles?: string[] },
+    private _props: Record<string, any> = {},
     private _attrKeys: string[],
     private _propKeys: string[],
     hydrate?: RootHydrateFunction

packages/runtime-dom/src/index.ts

@@ -198,7 +198,8 @@ function normalizeContainer(
 export {
   defineCustomElement,
   defineSSRCustomElement,
-  VueElement
+  VueElement,
+  VueElementConstructor
 } from './apiCustomElement'
 
 // SFC CSS utilities