Add Support for Defining Custom Element Type for v-model

[jcbond92]

I am building a library with custom elements. Vue does a great job with custom elements, but the one issue I've run into is with supporting v-model.

Setting app.config.compilerOptions.isCustomElement works well for text input components where I can emit an input event and use a value prop, but I am unable to support checkboxes and radio buttons since V_MODEL_DYNAMIC is looking for event.target.value instead of event.target.checked.

The workaround here is to set a type on the host element like this:

<template>
  <custom-checkbox type="checkbox" v-model="value">Label</custom-checkbox>
</template>

<script>
import "@custom-element-package/checkbox.js"
export default {
  data() {
    return {
      value: true
    };
  },
};
</script>

While this works, it's another item for users to remember that I'd prefer for them to be able to configure globally in their app. I have tried setting type on the host element when the component mounts, but v-model seems to have already initialized.

Potential solution

isCustomElement could return an optional type that transformModel could use to select the correct v-model.

For example:

// this still works, `type` is undefined so everything works as it currently does
app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('custom-')
}

// but we could extend the API to do something like this
app.config.compilerOptions.isCustomElement = (tag) => {
  if (tag === 'custom-checkbox') return {customElement: true, type: 'checkbox'}
  return tag.startsWith('custom-')
}

[jcbond92]

If this sounds like a reasonable solution, I am happy to submit a PR.

[jcbond92]

Looking at this more, I am thinking it might be better to separate this bit of functionality out into separate option for simplicity:

app.config.compilerOptions.isCustomElement = (tag) => {
  return tag.startsWith('custom-')
}
app.config.compilerOptions.customElementType = (tag) => {
  if (tag === 'custom-checkbox') return 'checkbox';
}

[jcbond92]

Just submitted a PR with this implementation.

[leopiccionia]

A workaround I see in the wild is creating Vue components wrapping the custom elements, and creating its own version of vModel directive.

For example, this is how the great @ionic/vue lib implements the wrapper:
https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/vue-component-lib/utils.ts

And here you can see how it's used for IonCheckbox, IonRadio, IonRadioGroup, etc.
https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/src/proxies.ts

[jcbond92]

Thanks @leopiccionia, I think that's an interesting idea. In this situation, I only have an issue with radio and checkbox custom elements (everywhere else I can just emit input and update value on the host tag and it'll work).

But I don't think it's a difficult workaround to have users create a lightweight wrapper that would apply type="checkbox" or type="radio".

[MichaelHeydon]

Hi @jcbond92 , I'm wondering what approach you landed on in relation to checkbox/radio custom elements, in relation to: vuejs/core#4428 (comment)

[jcbond92]

Hey @MichaelHeydon, we ended up telling folks to manually apply type="checkbox" or type="radio" to custom elements that needed that type of v-model (e.g. toggles, switches, checkboxes, radios). It would be nice if there was a standard compiler based solution, though.

We support more Angular and React apps than Vue apps with our design system, though, so a cleaner solution hasn't been as big of a priority lately.

One other thought, though, might be providing some sort of Vite plugin for Vue apps to use that could update the custom elements with type attributes during the build process. Maybe something kind of like this?

import { Plugin } from 'vite';
import { parse, serialize } from 'node-html-parser';

export function customCheckboxPlugin(): Plugin {
  return {
    name: 'custom-element-plugin',

    /**
     * Modifies the HTML during the build process.
     * Finds elements with the `custom-checkbox` attribute and adds `type="checkbox"`.
     */
    transformIndexHtml(html: string) {
      const root = parse(html);

      // Find all elements with the `custom-checkbox` attribute.
      const elements = root.querySelectorAll('[custom-checkbox]');
      elements.forEach((element) => {
        // Add `type="checkbox"` attribute to the element.
        element.setAttribute('type', 'checkbox');
      });

      // Serialize the modified HTML and return it.
      return serialize(root);
    },
  };
}

[MichaelHeydon]

Ah right, thanks Joe.

[roydukkey]

Another potential solution would be to adding three new modifiers to the v-model directive: select, checkbox, radio.

Setting either of these modifiers would bypass the dynamic resolve for the type defined by the modifier.