2つの隣接するVueJSコンポーネントをレンダリングすることは可能ですか？

Question

私は2つのカスタム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要素は2つのタグ閉鎖システムであり、自己閉鎖単一要素ではない。

試してみてください。

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

動作します。

EDIT： Googleのweb components primerを見れば、それは

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>).