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

ref: #4792

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,10 +371,10 @@ 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
@@ -374,7 +382,7 @@ describe('defineCustomElement', () => {
       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
@@ -382,7 +390,7 @@ describe('defineCustomElement', () => {
       ;(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)
             }