如何理解Vue的DOM模板解析說明

結合Vue官網文檔看如下幾個案例，理解Vue的DOM模板解析說明。
官網詳解地址：https://cn.vuejs.org/v2/guide...
Vue版本地址：https://cdn.bootcss.com/vue/2...

案例一，使用Render函數，模板解析將渲染出錯

<div id="app">
    <table>
        <my-row>行元素</my-row>
    </table>
</div>
<script>
    Vue.component('myRow', {
        render: function(h) {
            return h('tr', '行元素');
        }
    });
    new Vue({
        el: '#app'
    });
</script>

案例二，使用Javascript模板字符串，模板解析渲染出錯

<div id="app">
    <table>
        <my-row></my-row>
    </table>
</div>
<script>
    Vue.component('myRow', {
        template: '<tr>行元素</tr>'
    });
    new Vue({
        el: '#app'
    });
</script>

案例三，使用<script type="text/x-template">，模板解析渲染出錯

<div id="app">
    <table>
        <my-row></my-row>
    </table>
</div>
<script type="text/x-template" id="tr">
    <tr>行元素</tr>
</script>
<script>
    Vue.component('myRow', {
        template: '#tr'
    });
    new Vue({
        el: '#app'
    });
</script>

案例四，使用Render函數，模板解析將渲染成功

<div id="app">
    <table>
        <tr is="my-row"></tr>
    </table>
</div>
<script>
    Vue.component('myRow', {
        render: function(h) {
            return h('tr', '行元素');
        }
    });
    new Vue({
        el: '#app'
    });
</script>

案例五，使用Javascript模板字符串，模板解析將渲染成功

<div id="app">
    <table>
        <tr is="my-row"></tr>
    </table>
</div>
<script>
    Vue.component('myRow', {
        template: '<tr>行元素</tr>'
    });
    new Vue({
        el: '#app'
    });
</script>

案例六，使用<script type="text/x-template">，模板解析將渲染成功

<div id="app">
    <table>
        <tr is="my-row"></tr>
    </table>
</div>
<script type="text/x-template" id="tr">
    <tr>行元素</tr>
</script>
<script>
    Vue.component('myRow', {
        template: '#tr'
    });
    new Vue({
        el: '#app'
    });
</script>

總結：綜上測試結果，在使用<ul>，<ol>，<table>，<select>，應該使用<tr is="my-row"></tr>的形式。