nextcloud-vue icon indicating copy to clipboard operation
nextcloud-vue copied to clipboard

[vue3] NcAppContent causes two `main` elements

Open susnux opened this issue 5 months ago • 2 comments

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

susnux avatar Aug 26 '24 16:08 susnux