[vue3] NcAppContent causes two `main` elements

[susnux]

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

[ShGKme]

It is a bit more problematic.

Making NcAppContent a div instead of main solves the problem with main inside main. But it doesn't solve the root issue.

The structure should be

<div>
  <nav /> 
  <main />
  <aside />
</div>

... and not

<main>
  <nav /> 
  <div />
  <aside />
</div>

[ShGKme]

I think that it's better to go the opposite way.

Adjust layout.user.php to replace that root <main> with a <div>. Then it works fine in Vue 2 and Vue 3 apps without any changes in components.

It may require adjustments on non-Vue apps, but:

• Having no main is not so bad as having main in main
• It is better to always to it in app. We cannot say that a non-Vue app always has only the main content, and not navigation + main + sidebar. For example, the settings page. And if we consider the settings page valid, then we also can just remove <main> in <NcAppContent> at all.