fix(custom-element): fix custom element props access on initial render

yyx990803 · yyx990803 · commit 4b7f76e36a7f · 2021-11-02T13:20:31.000+08:00
ref: vuejs#4792
diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts
@@ -191,13 +191,21 @@ describe('defineCustomElement', () => {
 
     test('handling properties set before upgrading', () => {
       const E = defineCustomElement({
-        props: ['foo'],
+        props: {
+          foo: String,
+          dataAge: Number
+        },
+        setup(props) {
+          expect(props.foo).toBe('hello')
+          expect(props.dataAge).toBe(5)
+        },
         render() {
           return `foo: ${this.foo}`
         }
       })
       const el = document.createElement('my-el-upgrade') as any
       el.foo = 'hello'
+      el.dataset.age = 5
       container.appendChild(el)
       customElements.define('my-el-upgrade', E)
       expect(el.shadowRoot.innerHTML).toBe(`foo: hello`)
@@ -363,26 +371,26 @@ describe('defineCustomElement', () => {
 
       // should inject styles
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<div>hello</div><style>div { color: red }</style>`
+        `<style>div { color: red }</style><div>hello</div>`
       )
       expect(e2.shadowRoot!.innerHTML).toBe(
-        `<div>world</div><style>div { color: red }</style>`
+        `<style>div { color: red }</style><div>world</div>`
       )
 
       // attr
       e1.setAttribute('msg', 'attr')
       await nextTick()
       expect((e1 as any).msg).toBe('attr')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<div>attr</div><style>div { color: red }</style>`
+        `<style>div { color: red }</style><div>attr</div>`
       )
 
       // props
       expect(`msg` in e1).toBe(true)
       ;(e1 as any).msg = 'prop'
       expect(e1.getAttribute('msg')).toBe('prop')
       expect(e1.shadowRoot!.innerHTML).toBe(
-        `<div>prop</div><style>div { color: red }</style>`
+        `<style>div { color: red }</style><div>prop</div>`
       )
     })
 
@@ -391,6 +399,9 @@ describe('defineCustomElement', () => {
         defineAsyncComponent(() => {
           return Promise.resolve({
             props: ['msg'],
+            setup(props) {
+              expect(typeof props.msg).toBe('string')
+            },
             render(this: any) {
               return h('div', this.msg)
             }
@@ -429,6 +440,9 @@ describe('defineCustomElement', () => {
         defineAsyncComponent(() => {
           return Promise.resolve({
             props: { n: Number },
+            setup(props) {
+              expect(props.n).toBe(20)
+            },
             render(this: any) {
               return h('div', this.n + ',' + typeof this.n)
             }
diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts
@@ -180,7 +180,6 @@ export class VueElement extends BaseClass {
     this._connected = true
     if (!this._instance) {
       this._resolveDef()
-      this._update()
     }
   }
 
@@ -231,17 +230,15 @@ export class VueElement extends BaseClass {
           }
         }
       }
-      if (numberProps) {
-        this._numberProps = numberProps
-        this._update()
-      }
+      this._numberProps = numberProps
 
       // check if there are props set pre-upgrade or connect
       for (const key of Object.keys(this)) {
         if (key[0] !== '_') {
-          this._setProp(key, this[key as keyof this])
+          this._setProp(key, this[key as keyof this], true, false)
         }
       }
+
       // defining getter/setters on prototype
       for (const key of rawKeys.map(camelize)) {
         Object.defineProperty(this, key, {
@@ -253,7 +250,12 @@ export class VueElement extends BaseClass {
           }
         })
       }
+
+      // apply CSS
       this._applyStyles(styles)
+
+      // initial render
+      this._update()
     }
 
     const asyncDef = (this._def as ComponentOptions).__asyncLoader
@@ -282,10 +284,15 @@ export class VueElement extends BaseClass {
   /**
    * @internal
    */
-  protected _setProp(key: string, val: any, shouldReflect = true) {
+  protected _setProp(
+    key: string,
+    val: any,
+    shouldReflect = true,
+    shouldUpdate = true
+  ) {
     if (val !== this._props[key]) {
       this._props[key] = val
-      if (this._instance) {
+      if (shouldUpdate && this._instance) {
         this._update()
       }
       // reflect

Original file line number	Diff line number	Diff line change
`@@ -180,7 +180,6 @@ export class VueElement extends BaseClass {`
`180`	`180`	`this._connected = true`
`181`	`181`	`if (!this._instance) {`
`182`	`182`	`this._resolveDef()`
`183`		`- this._update()`
`184`	`183`	`}`
`185`	`184`	`}`
`186`	`185`
`@@ -231,17 +230,15 @@ export class VueElement extends BaseClass {`
`231`	`230`	`}`
`232`	`231`	`}`
`233`	`232`	`}`
`234`		`- if (numberProps) {`
`235`		`- this._numberProps = numberProps`
`236`		`- this._update()`
`237`		`- }`
	`233`	`+ this._numberProps = numberProps`
`238`	`234`
`239`	`235`	`// check if there are props set pre-upgrade or connect`
`240`	`236`	`for (const key of Object.keys(this)) {`
`241`	`237`	`if (key[0] !== '_') {`
`242`		`- this._setProp(key, this[key as keyof this])`
	`238`	`+ this._setProp(key, this[key as keyof this], true, false)`
`243`	`239`	`}`
`244`	`240`	`}`
	`241`	`+`
`245`	`242`	`// defining getter/setters on prototype`
`246`	`243`	`for (const key of rawKeys.map(camelize)) {`
`247`	`244`	`Object.defineProperty(this, key, {`
`@@ -253,7 +250,12 @@ export class VueElement extends BaseClass {`
`253`	`250`	`}`
`254`	`251`	`})`
`255`	`252`	`}`
	`253`	`+`
	`254`	`+ // apply CSS`
`256`	`255`	`this._applyStyles(styles)`
	`256`	`+`
	`257`	`+ // initial render`
	`258`	`+ this._update()`
`257`	`259`	`}`
`258`	`260`
`259`	`261`	`const asyncDef = (this._def as ComponentOptions).__asyncLoader`
`@@ -282,10 +284,15 @@ export class VueElement extends BaseClass {`
`282`	`284`	`/**`
`283`	`285`	`* @internal`
`284`	`286`	`*/`
`285`		`- protected _setProp(key: string, val: any, shouldReflect = true) {`
	`287`	`+ protected _setProp(`
	`288`	`+ key: string,`
	`289`	`+ val: any,`
	`290`	`+ shouldReflect = true,`
	`291`	`+ shouldUpdate = true`
	`292`	`+ ) {`
`286`	`293`	`if (val !== this._props[key]) {`
`287`	`294`	`this._props[key] = val`
`288`		`- if (this._instance) {`
	`295`	`+ if (shouldUpdate && this._instance) {`
`289`	`296`	`this._update()`
`290`	`297`	`}`
`291`	`298`	`// reflect`