fix(custom-element): reflect prop default value

[edison1105]

close #9006

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	90.8 kB (+70 B)	34.5 kB (+29 B)	31.1 kB (+30 B)
vue.global.prod.js	148 kB (+70 B)	53.8 kB (+33 B)	48.1 kB (+35 B)

Usages

Name	Size	Gzip	Brotli
createApp	50.8 kB (+25 B)	19.9 kB (+15 B)	18.1 kB (+14 B)
createSSRApp	54.2 kB (+25 B)	21.2 kB (+15 B)	19.3 kB (+14 B)
defineCustomElement	53.2 kB (+70 B)	20.6 kB (+26 B)	18.8 kB (+51 B)
overall	64.6 kB (+25 B)	24.9 kB (+16 B)	22.6 kB (+25 B)

[mgibas]

I’m pretty sure if you’ll set an attribute (setProp-> reflect attr) inside of the constructor, real browser will throw an exception :(

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
language-tools	✅ success	✅ success
nuxt	❌ failure	✅ success
pinia	✅ success	✅ success
primevue	✅ success	✅ success
quasar	✅ success	✅ success
radix-vue	✅ success	✅ success
router	✅ success	✅ success
test-utils	✅ success	✅ success
vant	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success
vitepress	✅ success	✅ success
vue-i18n	✅ success	✅ success
vue-macros	✅ success	✅ success
vuetify	❌ failure	❌ failure
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success

[skirtles-code]

I think we may need to make a distinction between properties and attributes here.

The original issue was specifically about properties, not attributes. I think having default prop values reflected in the properties of the element make sense, but I'm not so sure about the attributes.

I've had a look through some resources about custom elements, but I can't find anything that describes what's expected for property defaults. There's a recommendation that calls to setAttribute should also set the property, and vice versa, but that isn't the scenario we're in here. A default is an implicit value, it isn't being set by the consumer of the element.

For native elements, a default value for a property doesn't lead to an attribute being set. For example, consider a <textarea>. The default value for rows is 2, which is reflected in the property, but there isn't a corresponding attribute for that default. Here's a Playground to illustrate that: example. I would expect the same from a custom element.

I suspect exposing the defaults as attributes could cause problems for SSR too. The hydration process won't be expecting those extra attributes to be present. I haven't actually verified whether this is problem in practice, as there's a lot of stuff that needs setting up to test it, but it isn't just Vue's hydration process that might be impacted, it could also impact hydration in other frameworks that are trying to use a Vue-based custom element.

[yyx990803]

Superseded by 63689ed

@skirtles-code that seems to be a separate topic from this PR - the current behavior of Vue custom elements always reflect declared props as attribute if it has a value, so this PR (and by extension 63689ed) just aligns default values with that behavior.