Vue should not cause execution of content within <noscript> tags

Version

2.6.8

Reproduction link

https://jsfiddle.net/ncwuvekm/1/

Steps to reproduce

Check the “network” tab.

You can see that Vue causes a request to the content within the <noscript>

What is expected?

Vue should not cause execution of <noscript>content

What is actually happening?

Vue causes requests to elements within <noscript>

---

It’s typical when websites are using Vue to supplement UI and a common pattern is to wrap the site with an id="app"

However, this introduces a problem when people are using <noscript> in various areas of the site that are not within Vue components as Vue will execute it regardless.

A use case example would be using a lazy loading library with a <noscript> fallback.

<img src="thumbnail.jpg" data-src="hi-resolution.jpg" />
<noscript><img src="hi-resolution.jpg" /></noscript>

Vue will cause the hi-resolution.jpg image to download even though it’s within the <noscript>

For anybody experiencing this issue, a hack is to add v-if="false" to your <noscript> to prevent the element from rendering e.g.<noscript v-if="false">

[lanaambre]

Just add the inline-template attribute to your <noscript> tag

<noscript inline-template>
 <img src="//something.jpg">
</noscript>

[posva]

It’s not that Vue processes the content, the browser seems to fire the requests with noscript tags added dynamically (which I wonder if should even be allowed)

const noscript = document.createElement('noscript')
const img = document.createElement('img')
img.setAttribute('src', "https://images.unsplash.com/photo-1552084007-76f5feb8d22a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60")

noscript.appendChild(img)

window.app.appendChild(noscript)

I think we could avoid rendering noscript elements in general, using a v-if=“false” is a valid workaround, you can combine it with v-pre too so Vue skips rendering any of their children and probably boosting the performance a bit too