When using the DOM as a template (e.g., using el options to mount a Vue instance on an element that already has content), you're limited by the HTML itself, because Vue can only get it after the browser parses and normalizes the template. content. In particular, note that elements like <ul>, <ol>, <table>, <select> are limited in what elements can be included, while others like <option> this can only appear inside certain elements.
Using these restricted elements in custom components can cause some problems, such as:
<table>
<my-row>...</my-row>
</table>
Custom components <my-row> will be treated as invalid content and will therefore cause incorrect rendering results .
A workaround is to use a special is feature:
<table>
<tr is="my-row"></tr>
</table>
It should be noted that these restrictions do not apply if using string templates from one of the following sources:
<script type="text/x-template">- JavaScript inline template strings
.vuecomponents