Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(custom-element): fix initial attr type casting for programmticall…
…y created elements

fix #4772
  • Loading branch information
yyx990803 committed Oct 9, 2021
1 parent c803eb1 commit 3ca8317
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 12 deletions.
17 changes: 17 additions & 0 deletions packages/runtime-dom/__tests__/customElement.spec.ts
Expand Up @@ -172,6 +172,23 @@ describe('defineCustomElement', () => {
expect(e.shadowRoot!.innerHTML).toBe(`20 number true boolean 2e1 string`)
})

// #4772
test('attr casting w/ programmatic creation', () => {
const E = defineCustomElement({
props: {
foo: Number
},
render() {
return `foo type: ${typeof this.foo}`
}
})
customElements.define('my-element-programmatic', E)
const el = document.createElement('my-element-programmatic') as any
el.setAttribute('foo', '123')
container.appendChild(el)
expect(el.shadowRoot.innerHTML).toBe(`foo type: number`)
})

test('handling properties set before upgrading', () => {
const E = defineCustomElement({
props: ['foo'],
Expand Down
25 changes: 13 additions & 12 deletions packages/runtime-dom/src/apiCustomElement.ts
Expand Up @@ -174,17 +174,6 @@ export class VueElement extends BaseClass {
}
this.attachShadow({ mode: 'open' })
}

// set initial attrs
for (let i = 0; i < this.attributes.length; i++) {
this._setAttr(this.attributes[i].name)
}
// watch future attr changes
new MutationObserver(mutations => {
for (const m of mutations) {
this._setAttr(m.attributeName!)
}
}).observe(this, { attributes: true })
}

connectedCallback() {
Expand Down Expand Up @@ -212,9 +201,21 @@ export class VueElement extends BaseClass {
if (this._resolved) {
return
}
this._resolved = true

// set initial attrs
for (let i = 0; i < this.attributes.length; i++) {
this._setAttr(this.attributes[i].name)
}

// watch future attr changes
new MutationObserver(mutations => {
for (const m of mutations) {
this._setAttr(m.attributeName!)
}
}).observe(this, { attributes: true })

const resolve = (def: InnerComponentDef) => {
this._resolved = true
const { props, styles } = def
const hasOptions = !isArray(props)
const rawKeys = props ? (hasOptions ? Object.keys(props) : props) : []
Expand Down

0 comments on commit 3ca8317

Please sign in to comment.