如何理解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>的形式。