Vue with Web Component "is" Attribute

Question

I am trying to use a web component which extends an existing element using the "is" attribute tag, but vue takes that attribute and converts it into a custom element.

I need vue to still recognize the v-model and business logic, but I also need vue to not change it to a custom component.

Vue turns this:

<textarea v-model="text" is="my-component"></textarea>

into:

<my-component></my-component>

I have tried setting "v-pre" but that keeps vue from tracking the v-model. I have also tried to set ignoredElements, but vue still convert to a custom element. I looked https://github.com/vuejs/vue/issues/2642 and it seems like this is supposed to be a fixed issue, but maybe I am missing something.

Here is a minimal example of what is happening: https://jsfiddle.net/ntkg1xeq/1/

Notice that the textarea turns into real-set in this example.

I would expect vue to disregard the "is" attribute if it does not match any registered components, and to not rewrite the element thus preventing the web component from working.

Is there any way to use vue and web components like this together?

bcjohn bcjohn · Accepted Answer · 2019-08-07T02:05:33

According to the last comment of Web component with "is" attribute not rendered in the view., <textarea v-pre v-model="text" is="my-component"></textarea> would be render to <textarea is="my-component"> just as your expectation. However, it seems the issue just fixed Vue 1.x ( Vue 1.0.12 example code ), not Vue 2.x ( your example code ).

So. if you want to set is attribute in textarea and make v-model works in Vue 2.x, I thought $refs is another solution ( Vue 2.x example code by using $refs ).

Vue with Web Component "is" Attribute

1 Answers