vue.js: what's the difference between and ?

Question

When using dynamic component in vue, we could use component or html tag such as div as the tag name:

Answer 1

The "is" attribute is not Vue specific, it comes from the Custom Element spec.

See also What is HTML "is" attribute?

But obviously Vue has to implement it on its own for its compilation, mimicking the Custom Element spec.

In the example you show, I guess it will not matter, as in both cases the tag ( or

) will be replaced by the Vue component instance. This is the typical situation of using is attribute to switch between several possible components ("dynamic components").

However it starts to matter when you try to use Custom Elements / Vue components (with runtime compilation) in some HTML elements that restrict the type of child elements they can have, as explained in the DOM Template Parsing Caveats section of Vue guide:

Some HTML elements, such as

,
, and have restrictions on what elements can appear inside them, and some elements such as
1. ,
, and can only appear inside certain other elements.

In these cases, the is attribute may not be (only) used to switch between dynamic components, but to comply with HTML restrictions (in order to avoid the browser behaving unexpectedly to our custom components) while still replacing them later on by our custom components.

Here is a quick demonstration with a

:

Vue.component('my-row', {
  template: '#my-row',
});

new Vue({
  el: '#app',
});

td,
th {
  border: 1px solid black;
}

Table	1

---

Table	2