vue.js: what's the difference between <component :is="comp-name"/> and <div :is="comp-name"/>?

Question

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

<component :is="comp-name"></component>

or:

// assume that the root tag of comp-name is div
<div :is="comp-name"></div>

So what's the difference between the 2 ways? Are the same?

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 (<component> or <div>) 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 <ul>, <ol>, <table> and <select> have restrictions on what elements can appear inside them, and some elements such as <li>, <tr>, and <option> 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 <table>:

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

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

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

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <table id="table1">
    <tr>
      <th>Table</th>
      <td>1</td>
    </tr>
    <!-- Below Custom component will be stripped out of the table. Exact result may differ depending on browsers -->
    <my-row></my-row>
  </table>

  <hr />

  <table id="table2">
    <tr>
      <th>Table</th>
      <td>2</td>
    </tr>
    <!-- Valid TR row will be correctly replaced by Custom component -->
    <tr is="my-row"></tr>
  </table>
</div>

<template id="my-row">
  <tr>
    <th>Header</th>
    <td>Cell</td>
  </tr>
</template>

Result:

• in Firefox, the <my-row> tag is rendered outside and above the <table>.
• same in Chrome.