你能确保解析出正确的DOM结构吗？
在h5的table中，什么元素可以出现在其内部是严格定义的，比如我们想要<table>中有<tbody>，<tbody>中有<tr>....，而不是<tbody>中有个其他不该属于的标签，比如自己定义一个组件，里面模板还是<tr>....</tr>，这样会失败！
我们来看看最先会遇到什么问题，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件细节is使用
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row', {
template: '<tr><td> this is a row</td></tr>'
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>运行结果
这个可不是我们想要的，尽管能够显示结果，但是我的row组件明明写在<tbody>里面，为什么出现在了外面？
记得vue中还有动态组件，类似于<component :is="xxxx"></component>要不我们来试试？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件细节is使用
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<component :is="comName"></component>
<!-- <tr :is="comName"></tr> -->
</tbody>
</table>
</div>
<script>
Vue.component('row', {
template: '<tr><td> this is a row</td></tr>'
})
var vm = new Vue({
el: '#app',
data: {
comName: 'row'
}
})
</script>
</body>
</html>这么写和刚刚是一模一样的结果，dom结构中<tr>还是在<table>之外，那到底有没有解决办法呢？当然是有的
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。<table>之内，那就不能随便写一个标签，它不认的！！而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。我们上面写的<row>和<component>都被作为无效的内容提升到<table>外部，并导致最终渲染结果出错
正确的应该怎么写的，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件细节is使用
</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr><!-- 这里is前面没有冒号 -->
</tbody>
</table>
</div>
<script>
Vue.component('row', {
template: '<tr><td> this is a row</td></tr>'
})
var vm = new Vue({
el: '#app'
})
</script>
</body>
</html>运行结果
扫描二维码关注公众号，回复：
9191436 查看本文章
比如ul、ol中只能放li，如果要用组件，就要和上面一样的写法<li is="你的组件名"></li>
select中只能放option，如果要用组件，则<option is="你的组件名"></option>
这样才确保所有浏览器解析出来正确的DOM结构
关注、留言，我们一起学习。
===============Talk is cheap, show me the code================
