fix(html): rewrite assets url in <template> (#17988)

Author: sunnylost

packages/vite/src/node/plugins/html.ts

@@ -173,6 +173,9 @@ function traverseNodes(
   node: DefaultTreeAdapterMap['node'],
   visitor: (node: DefaultTreeAdapterMap['node']) => void,
 ) {
+  if (node.nodeName === 'template') {
+    node = (node as DefaultTreeAdapterMap['template']).content
+  }
   visitor(node)
   if (
     nodeIsElement(node) ||

playground/assets/__tests__/assets.spec.ts

@@ -588,3 +588,10 @@ test.runIf(isBuild)('assets inside <noscript> is rewrote', async () => {
     /<img class="noscript" src="\/foo\/bar\/assets\/asset-[-\w]+\.png" \/>/,
   )
 })
+
+test.runIf(isBuild)('assets inside <template> is rewrote', async () => {
+  const indexHtml = readFile('./dist/foo/index.html')
+  expect(indexHtml).toMatch(
+    /<img class="template" src="\/foo\/bar\/assets\/asset-[-\w]+\.png" \/>/,
+  )
+})

playground/assets/index.html

@@ -413,6 +413,11 @@ <h3>assets in noscript</h3>
   <img class="noscript" src="./nested/asset.png" />
 </noscript>
 
+<h3>assets in template</h3>
+<template>
+  <img class="template" src="./nested/asset.png" />
+</template>
+
 <link rel="stylesheet" href="asset/style.css" />
 <div class="relative-css">link style</div>
 <div class="relative-js"></div>