Description
Version
2.5.17
Reproduction link
https://codepen.io/brophdawg11/pen/OBdZyX
Steps to reproduce
I'm opening this issue as a follow up to #8247, as I don't think the solution provided there is suitable for all use-cases. In a fairly simple UI, where everything is relatively positioned and flows downward, it would likely be fine to include <noscript> outside the context of the Vue application, and it would render correctly above the entire app.
However, there are plenty of other UI's that it may not be desirable or feasible to include <noscript> outside of the Vue application context and display it properly. The linked codepen shows a simple fixed-header layout, where including the <noscript> tag outside the Vue application context results in the <noscript> tag being hidden behind the fixed header, where in reality it is intended to be rendered inside the main body content, and thus below the fixed header.
The <noscript> outside the Vue context also has the unintended effect of pushing down the main content, which has a proper margin-top to account for the static-height fixed header.
Per MDN, <noscript> is Flow Content (https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content), it is perfectly viable to exist outside the <head> (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript), and is perfectly valid to nest inside the DOM in a <div>, as div's allow Flow Content as their children (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div).
Please reconsider the decision to not permit noscript tags in Vue templates.
What is expected?
<noscript> elements should render properly in Vue templates
What is actually happening?
<noscript> elements do not render properly in Vue templates and cause hydration issues when in SSR