Emit Unprefixed Events for Form Controls

[break-stuff]

Has the team tried emitting unprefixed/unscoped events for framework integration? If you emit unprefixed events in addition to your prefixed events (input and change), this should allow Vue's v-model and Angular's ngModel to bind to the value property.

These don't need to be documented and developers don't need to be aware they exist, but the frameworks should be able to detect these and update values appropriately.

[claviska]

Considering how events are retargeted to the host element, I'm curious to know if this already works for simpler controls such as <sl-input>. Won't the retargeted input event take care of that? Wouldn't emitting input again be redundant?

And while it might work for simple controls, I imagine it will lead to retargeted events triggering false positives in more complex cases. For example, color picker has an internal input for entering a color manually. This means every keystroke emits a retargeted input event with the value of said input (not the color picker's actual value).

Internal form control values aren't guaranteed to be the same as the host element's value, so this is just one example where I can see this causing problems.

[break-stuff]

Yep! That's exactly what we do for our complex components like the date picker. We stop the propagation of the internal input element events so we can emit them with our scoped events. For simpler components, you could allow the native events to bubble as long as they are consistent with your scoped events.

[break-stuff]

Just the events used for framework data binding - specifically "change" and "input".

[claviska]

I'm curious if you've run into any problems with v-model + custom elements using Vite.

[vite-node] [plugin:vite:vue] [SyntaxError] W:/www/website/pages/checkout.vue:39:17

37 |                <sl-input
38 |                  label="Contacto telefónico"
39 |                  v-model="order.phone"
   |                  ^
40 |                  type="tel"
41 |                ></sl-input>

at W:/www/website/pages/checkout.vue:39:17

See this thread for more: #1412 (reply in thread)

[break-stuff]

Oh, that's interesting. I have not seen that yet. Is this code up somewhere I can play with it?

[break-stuff]

Has the Vite config been configured for custom elements?

https://vuejs.org/guide/extras/web-components.html#example-vite-config

[break-stuff]

Here's a simple example I spun up and it looks like it's working fine (including the v-model data binding).

https://github.com/break-stuff/vue-shoelace-test