nextcloud-vue
nextcloud-vue copied to clipboard
[vue3] NcAppContent causes two `main` elements
With Vue 2 the $mount
will replace the DOM node with the app, but with Vue 3 the app is rendered within the node.
This causes problem in most cases, as the templates user
and public
will render <main id="content">
and apps are supposed to mount like app.mount('#content')
.
This will cause a DOM like:
<main id="content">
<div class="nc-content">
<main id="app-content-vue"><!--- ---></main>
</div>
</main>
This is invalid: https://html.spec.whatwg.org/multipage/grouping-content.html#the-main-element
A document must not have more than one main element that does not have the hidden attribute specified.
So we need adjust NcAppContent
to div
if mounted within a main
tag (conditionally because the base
and guest
template do not provide a main
element).