Child components aren't mounted if the document root is another HTML tag than used in the root component #116

fbring · 2019-04-15T12:35:12Z

Child components aren't mounted if the document root in the HTML file uses another HTML tag than the root component.

Example:

<!-- index.html -->

<body>
   <div id="root"></div>
</body>

<!-- rootComponent.twig -->

<section>
   <h1>I am root 🌳</h1>
   {% mount '../childComponent' as 'childComponent' %}
</section>

// index.js

const documentRoot = document.getElementById('root');
render(documentRoot, rootComponent);

I would expect that the child components are mounted properly or a warning/error should be shown.

The root component renders as expected but instead of mounting the child component a <m-placeholder></m-placeholder> is rendered.

Use Create Melody App
Change the outer <div class="home">...</div> in src/home/index.twig to something else e.g.
<section class="home">...</section>
src/counter is not mounted

The text was updated successfully, but these errors were encountered:

Provide feedback