Skip to content

Commit

Permalink
fix(custom-element): reflect prop default value on custom element
Browse files Browse the repository at this point in the history
close #9006
close #10537
  • Loading branch information
yyx990803 committed Aug 6, 2024
1 parent bcb9a70 commit 63689ed
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 10 deletions.
9 changes: 9 additions & 0 deletions packages/runtime-core/src/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1247,4 +1247,13 @@ export interface ComponentCustomElementInterface {
* @internal
*/
_removeChildStyle(type: ConcreteComponent): void
/**
* @internal
*/
_setProp(
key: string,
val: any,
shouldReflect?: boolean,
shouldUpdate?: boolean,
): void
}
4 changes: 4 additions & 0 deletions packages/runtime-core/src/componentProps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -480,6 +480,10 @@ function resolvePropValue(
} else {
value = defaultValue
}
// #9006 reflect default value on custom element
if (instance.ce) {
instance.ce._setProp(key, value)
}
}
// boolean casting
if (opt[BooleanFlags.shouldCast]) {
Expand Down
21 changes: 20 additions & 1 deletion packages/runtime-dom/__tests__/customElement.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ describe('defineCustomElement', () => {
expect(el.shadowRoot!.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')
})

// # 5793
// #5793
test('set number value in dom property', () => {
const E = defineCustomElement({
props: {
Expand All @@ -357,6 +357,25 @@ describe('defineCustomElement', () => {
expect(el.shadowRoot.innerHTML).toBe('max age: 50/type: number')
})

// #9006
test('should reflect default value', () => {
const E = defineCustomElement({
props: {
value: {
type: String,
default: 'hi',
},
},
render() {
return this.value
},
})
customElements.define('my-el-default-val', E)
container.innerHTML = `<my-el-default-val></my-el-default-val>`
const e = container.childNodes[0] as any
expect(e.value).toBe('hi')
})

test('support direct setup function syntax with extra options', () => {
const E = defineCustomElement(
props => {
Expand Down
13 changes: 4 additions & 9 deletions packages/runtime-dom/src/apiCustomElement.ts
Original file line number Diff line number Diff line change
Expand Up @@ -395,7 +395,7 @@ export class VueElement
// check if there are props set pre-upgrade or connect
for (const key of Object.keys(this)) {
if (key[0] !== '_' && declaredPropKeys.includes(key)) {
this._setProp(key, this[key as keyof this], true, false)
this._setProp(key, this[key as keyof this])
}
}

Expand All @@ -406,7 +406,7 @@ export class VueElement
return this._getProp(key)
},
set(val) {
this._setProp(key, val)
this._setProp(key, val, true, true)
},
})
}
Expand Down Expand Up @@ -435,7 +435,7 @@ export class VueElement
if (this._numberProps && this._numberProps[camelKey]) {
value = toNumber(value)
}
this._setProp(camelKey, value, false)
this._setProp(camelKey, value, false, true)
}

/**
Expand All @@ -448,12 +448,7 @@ export class VueElement
/**
* @internal
*/
protected _setProp(
key: string,
val: any,
shouldReflect = true,
shouldUpdate = true,
) {
_setProp(key: string, val: any, shouldReflect = true, shouldUpdate = false) {
if (val !== this._props[key]) {
this._props[key] = val
if (shouldUpdate && this._instance) {
Expand Down

0 comments on commit 63689ed

Please sign in to comment.