是否可以渲染两个相邻的 VueJS 组件？

Question

我创建了两个自定义 VueJS 组件，我想将它们彼此相邻放置，如下所示：

<div id="app">
      <x-component />   
      <y-component />
</div>

...
new Vue({
    el: '#app',
    components: {
        'x-component': { template: '<div>component x</div>' },
        'y-component': { template: '<div>component y</div>' }
    }
});

当我这样做时，只呈现第一个组件。这是 VueJS 中的错误还是我做错了什么？看起来这应该是可能的。

当我按如下方式更改它时，它可以工作：

<div id="app">
      <div>
        <x-component />   
      </div>
      <div>
        <y-component />
      </div>
</div>

复制品如下：

不工作：https : //jsfiddle.net/mquqonuq/1/

工作：https : //jsfiddle.net/mquqonuq/2/

Answer 1

我现在不记得这是否是 html 规范问题，但自定义 Web 元素需要是一个双标签封闭系统，而不是自封闭的单个元素。

尝试：

<div id="app">
    <x-component></x-component>
    <y-component></y-component>
</div>

哪个有效。

编辑：如果您查看 google 的Web Components 入门，它会列出

3. Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (<app-drawer></app-drawer>).