CODEWITHSUNDEEP
vue.jsbuilt-incustom-element
hyeong-min
hyeong-min

Reputation: 81

How to use customized built-in element in VueJs

I made a custom element extends built-in element like <button is="my-button">. But it's not working when I use it in VueJs. Because maybe VueJs use is attribute for its components.

Is there any good solution for this?

Sample code: https://jsbin.com/yucojat/2/edit?html,js,output

Upvotes: 3

Views: 175

Answers (1)

connexo
connexo

Reputation: 56783

In Vue3, which still doesn't support customized built-ins in standard Vue templates (which strip the is="my-button" attribute), you can use the h() function, which supports dynamic creation of CBIs.

Example:

<script setup>
import { h, defineComponent } from 'vue';

export default defineComponent({
  render() {
    return h('button', { is: 'my-button' }, 'Hello, Vue!');
  }
});
</script>

Unfortunately, when using the component, anything inside of the component will work as if you had a v-once directive on the component, that is, initially a binding will work, but with no reactivity. Could still be useful for exactly those cases where you would want to use v-once anyway.

At the end of the day, this appears to be an awful workaround for a limitation that comes with just about all popular frameworks, not just Vue. E.g. JSX doesn't support is at all, which basically means you cannot use CBIs in React, Svelte doesn't support is, etc.

Upvotes: 0

Related Questions