getPropsData() sets propsData for all props regardless of attribute existence. collides with 'required' validation

[djabor]

Setting a required prop, but not setting the attribute on the HTML element:

expected behavior: setting { required: true } for a prop, should fail validation, in dev mode it should show a console.error.

actual behavior: required validation succeeds and collides with subsequent validations. e.g. asserting type.

vue-custom-element/src/utils/props.js

Line 125 in 41b7f6f

propsData[propCamelCase] = propValue instanceof Attr

using the custom elements in a document, without the required [required:true] props results in a bypassed validation.

https://github.com/vuejs/vue/blob/81e1e47cabbd479e2a285f03120944f1efffe749/src/core/util/props.js#L28

is where vue checks whether propsdata property exists. since the properties exist with undefined value, absent is always false due to using this mechanism:

https://github.com/vuejs/vue/blob/653aac2c57d15f0e93a2c1cc7e6fad156658df19/src/shared/util.js#L139

as a result, the validation check:
https://github.com/vuejs/vue/blob/81e1e47cabbd479e2a285f03120944f1efffe749/src/core/util/props.js#L107
always fails to enter the condition.

suggested fix:

const propValue = element.attributes[name] || element[propCamelCase];
// ...
// ...
// ensure propsData is only set if `propsValue` exists.
if (propValue instanceof Attr) {
     propsData[propCamelCase] = convertAttributeValue(propValue.value, type)
} else if (typeof propValue !== 'undefined')
     propsData[propCamelCase] = propValue;
}

[karol-f]

Thanks for detailed explanation, I will look at it soon.

[karol-f]

Fixed in [email protected] (https://github.com/karol-f/vue-custom-element/releases/tag/v3.2.5). Thanks for the issue!

[djabor]

thanks, I hadn't had the time to debug it in depth, but I noticed that I missed a few more locations requiring fixes to this issue's end. I'll give it a spin later today! thanks.