webpack 5.107.1 → 5.108.0

package/lib/html/HtmlParser.js

@@ -4,43 +4,77 @@
 
 "use strict";
 
-const vm = require("vm");
 const Parser = require("../Parser");
+const {
+	TT_EOF,
+	TT_FUNCTION,
+	TT_STRING,
+	TT_URL,
+	TT_WHITESPACE,
+	TokenStream,
+	equalsLowerCase
+} = require("../css/syntax");
 const ConstDependency = require("../dependencies/ConstDependency");
+const HtmlEntryDependency = require("../dependencies/HtmlEntryDependency");
+const HtmlInlineHtmlDependency = require("../dependencies/HtmlInlineHtmlDependency");
 const HtmlInlineScriptDependency = require("../dependencies/HtmlInlineScriptDependency");
 const HtmlInlineStyleDependency = require("../dependencies/HtmlInlineStyleDependency");
-const HtmlScriptSrcDependency = require("../dependencies/HtmlScriptSrcDependency");
 const HtmlSourceDependency = require("../dependencies/HtmlSourceDependency");
 const StaticExportsDependency = require("../dependencies/StaticExportsDependency");
 const CommentCompilationWarning = require("../errors/CommentCompilationWarning");
 const ModuleDependencyError = require("../errors/ModuleDependencyError");
 const UnsupportedFeatureWarning = require("../errors/UnsupportedFeatureWarning");
 const WebpackError = require("../errors/WebpackError");
+const LazySet = require("../util/LazySet");
 const LocConverter = require("../util/LocConverter");
 const createHash = require("../util/createHash");
 const { contextify } = require("../util/identifier");
 const {
 	createMagicCommentContext,
+	parseMagicComment,
 	webpackCommentRegExp
 } = require("../util/magicComment");
-const walkHtmlTokens = require("./walkHtmlTokens");
-
+const {
+	NS_SVG,
+	NodeType,
+	SVG_TAG_ADJUST,
+	SourceProcessor,
+	buildHtmlAst,
+	decodeHtmlEntities,
+	decodeHtmlEntitiesWithMap,
+	findAttr,
+	parseSrcset
+} = require("./syntax");
+
+/** @typedef {import("../../declarations/WebpackOptions").HtmlParserOptions} HtmlParserOptions */
+/** @typedef {import("../javascript/JavascriptParser").Range} Range */
+/** @typedef {import("../Module")} Module */
 /** @typedef {import("../Module").BuildInfo} BuildInfo */
+/** @typedef {import("../Compilation").FileSystemDependencies} FileSystemDependencies */
 /** @typedef {import("../Module").BuildMeta} BuildMeta */
+/** @typedef {import("../NormalModule")} NormalModule */
 /** @typedef {import("../Parser").ParserState} ParserState */
 /** @typedef {import("../Parser").PreparsedAst} PreparsedAst */
+/** @typedef {import("./HtmlModule").HtmlModuleBuildInfo} HtmlModuleBuildInfo */
+
+/**
+ * @typedef {object} HtmlTemplateContext
+ * @property {Module} module the html module being transformed
+ * @property {string} resource absolute path of the module's resource
+ * @property {(dependency: string) => void} addDependency register a file (e.g. a template partial) as a build dependency so editing it triggers a rebuild
+ * @property {(dependency: string) => void} addContextDependency register a directory as a build dependency
+ * @property {(dependency: string) => void} addMissingDependency register a not-yet-existing path as a build dependency so creating it triggers a rebuild
+ * @property {(dependency: string) => void} addBuildDependency register a build dependency (e.g. a template engine config) so changing it invalidates the cache
+ * @property {(warning: Error | string) => void} emitWarning report a non-fatal warning on the module
+ * @property {(error: Error | string) => void} emitError report an error on the module
+ */
+/** @typedef {(source: string, context: HtmlTemplateContext) => string} HtmlTemplateFunction */
 
 const HORIZONTAL_TAB = "\u0009".charCodeAt(0);
 const NEWLINE = "\u000A".charCodeAt(0);
 const FORM_FEED = "\u000C".charCodeAt(0);
 const CARRIAGE_RETURN = "\u000D".charCodeAt(0);
 const SPACE = "\u0020".charCodeAt(0);
-const COMMA = ",".charCodeAt(0);
-const LEFT_PARENTHESIS = "(".charCodeAt(0);
-const RIGHT_PARENTHESIS = ")".charCodeAt(0);
-const SMALL_LETTER_W = "w".charCodeAt(0);
-const SMALL_LETTER_X = "x".charCodeAt(0);
-const SMALL_LETTER_H = "h".charCodeAt(0);
 
 /**
  * @param {number} char char
@@ -61,7 +95,50 @@ function isASCIIWhitespace(char) {
 	);
 }
 
-/** @typedef {[string, number, number]} ParsedSource */
+/** @typedef {import("./syntax").ParsedSource} ParsedSource */
+
+// Cheap pre-filter for a `style="..."` attribute: only route it through the
+// CSS pipeline when it can hold a URL-bearing function (`url()` / `src()` /
+// `image()` / `image-set()`), otherwise the processed text equals the input.
+const STYLE_ATTR_URL_REGEXP = /url\(|src\(|image\(|image-set\(/i;
+
+// Cheap pre-filter for a `css-url` attribute value (an SVG presentation
+// attribute such as `fill`, `clip-path`, …): only tokenize values that can
+// hold a `url(...)` FuncIRI. Most are plain colors/keywords (`#fff`, `red`).
+const FUNC_IRI_URL_REGEXP = /url\(/i;
+
+// Cheap pre-filter for `<iframe srcdoc>` markup: only spin up a nested HTML
+// module when the document can reference an asset — via any attribute (`src=`,
+// `href=`, `style=`, …), a CSS `url(...)`, or a CSS `@import`. Pure
+// formatting/text markup (`<p>hi</p>`) rewrites to itself, so skip it.
+const SRCDOC_ASSET_REGEXP = /[=]|url\(|@import/i;
+
+// CSP/fetch attributes copied verbatim onto a synthesized sibling `<link>` /
+// `<script>` (`HtmlEntryDependency`). Fixed output order, independent of
+// source order.
+const COPYABLE_SIBLING_ATTRS = ["nonce", "crossorigin", "referrerpolicy"];
+
+const CC_QUOTATION = '"'.charCodeAt(0);
+const CC_APOSTROPHE = "'".charCodeAt(0);
+
+/**
+ * Byte-exact source span of an attribute including the single leading
+ * whitespace (` name`, ` name=value`, ` name="value"`), mirroring the
+ * tokenizer's end-of-attribute rule (`valueEnd + 1` past the closing quote).
+ * @param {string} source HTML source
+ * @param {import("./syntax").HtmlAttribute} attr attribute
+ * @returns {string} the attribute's source slice
+ */
+const attrSourceSpan = (source, attr) => {
+	const end =
+		attr.valueStart === -1
+			? attr.nameEnd
+			: source.charCodeAt(attr.valueStart - 1) === CC_QUOTATION ||
+				  source.charCodeAt(attr.valueStart - 1) === CC_APOSTROPHE
+				? attr.valueEnd + 1
+				: attr.valueEnd;
+	return source.slice(attr.nameStart - 1, end);
+};
 
 // eslint-disable-next-line no-control-regex
 const IGNORE_CHARS_REGEXP = /[\u0000-\u001F\u007F-\u009F\u00A0]/g;
@@ -101,355 +178,86 @@ const parseSrc = (input) => {
 	return [[value, start, end]];
 };
 
-// HTML `<style>` content is rawtext: it ends at the first `</style>`
-// where the tag name is followed by whitespace, `>` or `/`. The
-// lookahead (rather than a consuming character class) keeps the match
-// from running past the first `>` into a later tag — the
-// `[^>]*` only consumes any (rarely-seen) end-tag attributes before the
-// closing `>` of the end tag itself.
-const STYLE_END_REGEXP = /<\/style(?=[\s/>])[^>]*>/gi;
-
-// (Don't use \s, to avoid matching non-breaking space)
-// eslint-disable-next-line no-control-regex
-const LEADING_SPACES_REGEXP = /^[ \t\n\r\u000C]+/;
-// eslint-disable-next-line no-control-regex
-const LEADING_COMMAS_OR_SPACES_REGEXP = /^[, \t\n\r\u000C]+/;
-// eslint-disable-next-line no-control-regex
-const LEADING_NOT_SPACES = /^[^ \t\n\r\u000C]+/;
-const TRAILING_COMMAS_REGEXP = /[,]+$/;
-const NON_NEGATIVE_INTEGER_REGEXP = /^\d+$/;
-// ( Positive or negative or unsigned integers or decimals, without or without exponents.
-// Must include at least one digit.
-// According to spec tests any decimal point must be followed by a digit.
-// No leading plus sign is allowed.)
-// https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number
-const FLOATING_POINT_REGEXP =
-	/^-?(?:[0-9]+|[0-9]*\.[0-9]+)(?:[eE][+-]?[0-9]+)?$/;
-
 /**
+ * Extracts the `icon-uri` value of an `msapplication-task` meta content
+ * (`name=…;action-uri=…;icon-uri=…`) — the other parts are page URLs, not assets.
  * @param {string} input input
- * @returns {ParsedSource[]} parsed srcset
+ * @returns {ParsedSource[]} parsed icon-uri
  */
-const parseSrcset = (input) => {
-	// 1. Let input be the value passed to this algorithm.
-	const inputLength = input.length;
-
-	/** @type {string | undefined} */
-	let url;
-	/** @type {string[]} */
-	let descriptors;
-	/** @type {string} */
-	let currentDescriptor;
-	/** @type {string} */
-	let state;
-	/** @type {number} */
-	let charCode;
-	/** @type {number} */
-	let position = 0;
-	/** @type {number} */
-	let start;
-
-	/** @type {[string, number, number][]} */
-	const candidates = [];
-
-	/**
-	 * @param {RegExp} regExp reg exp to collect characters
-	 * @returns {string | undefined} characters
-	 */
-	function collectCharacters(regExp) {
-		/** @type {string} */
-		let chars;
-		const match = regExp.exec(input.slice(Math.max(0, position)));
-
-		if (match) {
-			[chars] = match;
-			position += chars.length;
-
-			return chars;
-		}
-	}
-
-	/**
-	 * @returns {void}
-	 */
-	function parseDescriptors() {
-		// 9. Descriptor parser: Let error be no.
-		let pError = false;
-
-		// 10. Let width be absent.
-		// 11. Let density be absent.
-		// 12. Let future-compat-h be absent. (We're implementing it now as h)
-		/** @type {number | undefined} */
-		let width;
-		/** @type {number | undefined} */
-		let density;
-		/** @type {number | undefined} */
-		let height;
-		/** @type {string | undefined} */
-		let desc;
-
-		// 13. For each descriptor in descriptors, run the appropriate set of steps
-		// from the following list:
-		for (let i = 0; i < descriptors.length; i++) {
-			desc = descriptors[i];
-
-			const lastChar = desc[desc.length - 1].charCodeAt(0);
-			const value = desc.slice(0, Math.max(0, desc.length - 1));
-
-			// If the descriptor consists of a valid non-negative integer followed by
-			// a U+0077 LATIN SMALL LETTER W character
-			if (
-				NON_NEGATIVE_INTEGER_REGEXP.test(value) &&
-				lastChar === SMALL_LETTER_W
-			) {
-				// If width and density are not both absent, then let error be yes.
-				if (width || density) {
-					pError = true;
-				}
-
-				const intVal = Number.parseInt(value, 10);
-
-				// Apply the rules for parsing non-negative integers to the descriptor.
-				// If the result is zero, let error be yes.
-				// Otherwise, let width be the result.
-				if (intVal === 0) {
-					pError = true;
-				} else {
-					width = intVal;
+const parseMsapplicationTask = (input) => {
+	const len = input.length;
+	let pos = 0;
+	while (pos < len) {
+		let sep = input.indexOf(";", pos);
+		if (sep === -1) sep = len;
+		const eq = input.indexOf("=", pos);
+		if (eq !== -1 && eq < sep) {
+			const key = input.slice(pos, eq).trim().toLowerCase();
+			if (key === "icon-uri") {
+				let start = eq + 1;
+				let end = sep;
+				while (start < end && isASCIIWhitespace(input.charCodeAt(start))) {
+					start++;
 				}
-			}
-			// If the descriptor consists of a valid floating-point number followed by
-			// a U+0078 LATIN SMALL LETTER X character
-			else if (
-				FLOATING_POINT_REGEXP.test(value) &&
-				lastChar === SMALL_LETTER_X
-			) {
-				// If width, density and future-compat-h are not all absent, then let error
-				// be yes.
-				if (width || density || height) {
-					pError = true;
-				}
-
-				const floatVal = Number.parseFloat(value);
-
-				// Apply the rules for parsing floating-point number values to the descriptor.
-				// If the result is less than zero, let error be yes. Otherwise, let density
-				// be the result.
-				if (floatVal < 0) {
-					pError = true;
-				} else {
-					density = floatVal;
+				while (end > start && isASCIIWhitespace(input.charCodeAt(end - 1))) {
+					end--;
 				}
-			}
-			// If the descriptor consists of a valid non-negative integer followed by
-			// a U+0068 LATIN SMALL LETTER H character
-			else if (
-				NON_NEGATIVE_INTEGER_REGEXP.test(value) &&
-				lastChar === SMALL_LETTER_H
-			) {
-				// If height and density are not both absent, then let error be yes.
-				if (height || density) {
-					pError = true;
-				}
-
-				const intVal = Number.parseInt(value, 10);
-
-				// Apply the rules for parsing non-negative integers to the descriptor.
-				// If the result is zero, let error be yes. Otherwise, let future-compat-h
-				// be the result.
-				if (intVal === 0) {
-					pError = true;
-				} else {
-					height = intVal;
-				}
-
-				// Anything else, Let error be yes.
-			} else {
-				pError = true;
+				if (start === end) return [];
+				return [[input.slice(start, end), start, end]];
 			}
 		}
-
-		// 15. If error is still no, then append a new image source to candidates whose
-		// URL is url, associated with a width width if not absent and a pixel
-		// density density if not absent. Otherwise, there is a parse error.
-		if (!pError) {
-			candidates.push([
-				/** @type {string} */ (url),
-				start,
-				start + /** @type {string} */ (url).length
-			]);
-		} else {
-			throw new Error(
-				`Invalid srcset descriptor found in '${input}' at '${desc}'`
-			);
-		}
+		pos = sep + 1;
 	}
+	return [];
+};
 
-	/**
-	 * @returns {void}
-	 */
-	function tokenize() {
-		// 8.1. Descriptor tokenizer: Skip whitespace
-		collectCharacters(LEADING_SPACES_REGEXP);
-
-		// 8.2. Let current descriptor be the empty string.
-		currentDescriptor = "";
-
-		// 8.3. Let state be in descriptor.
-		state = "in descriptor";
-
-		while (true) {
-			// 8.4. Let charCode be the character at position.
-			charCode = input.charCodeAt(position);
-
-			//  Do the following depending on the value of state.
-			//  For the purpose of this step, "EOF" is a special character representing
-			//  that position is past the end of input.
-
-			// In descriptor
-			if (state === "in descriptor") {
-				// Do the following, depending on the value of charCode:
-
-				// Space character
-				// If current descriptor is not empty, append current descriptor to
-				// descriptors and let current descriptor be the empty string.
-				// Set state to after descriptor.
-				if (isASCIIWhitespace(charCode)) {
-					if (currentDescriptor) {
-						descriptors.push(currentDescriptor);
-						currentDescriptor = "";
-						state = "after descriptor";
-					}
-				}
-				// U+002C COMMA (,)
-				// Advance position to the next character in input. If current descriptor
-				// is not empty, append current descriptor to descriptors. Jump to the step
-				// labeled descriptor parser.
-				else if (charCode === COMMA) {
-					position += 1;
-
-					if (currentDescriptor) {
-						descriptors.push(currentDescriptor);
-					}
-
-					parseDescriptors();
-
-					return;
-				}
-				// U+0028 LEFT PARENTHESIS (()
-				// Append charCode to current descriptor. Set state to in parens.
-				else if (charCode === LEFT_PARENTHESIS) {
-					currentDescriptor += input.charAt(position);
-					state = "in parens";
-				}
-				// EOF
-				// If current descriptor is not empty, append current descriptor to
-				// descriptors. Jump to the step labeled descriptor parser.
-				else if (Number.isNaN(charCode)) {
-					if (currentDescriptor) {
-						descriptors.push(currentDescriptor);
-					}
-
-					parseDescriptors();
-
-					return;
-
-					// Anything else
-					// Append charCode to current descriptor.
-				} else {
-					currentDescriptor += input.charAt(position);
-				}
-			}
-			// In parens
-			else if (state === "in parens") {
-				// U+0029 RIGHT PARENTHESIS ())
-				// Append charCode to current descriptor. Set state to in descriptor.
-				if (charCode === RIGHT_PARENTHESIS) {
-					currentDescriptor += input.charAt(position);
-					state = "in descriptor";
-				}
-				// EOF
-				// Append current descriptor to descriptors. Jump to the step labeled
-				// descriptor parser.
-				else if (Number.isNaN(charCode)) {
-					descriptors.push(currentDescriptor);
-					parseDescriptors();
-					return;
-				}
-				// Anything else
-				// Append charCode to current descriptor.
-				else {
-					currentDescriptor += input.charAt(position);
-				}
+/**
+ * Extracts `url(...)` references from a CSS value (an SVG presentation
+ * attribute). Reuses webpack's CSS lexer so quoting/escaping match the CSS
+ * spec; returns the `parseSrc` shape so the shared emit path maps and rewrites
+ * the spans. Unquoted `url(path)` rewrites the content span; quoted
+ * `url("path")` rewrites the inner string span (quotes preserved).
+ * @param {string} input attribute value (a CSS component-value list)
+ * @returns {ParsedSource[]} url references
+ */
+const parseCssUrls = (input) => {
+	const ts = new TokenStream(input);
+	/** @type {ParsedSource[]} */
+	const result = [];
+	for (;;) {
+		const t = ts.consume();
+		if (t.type === TT_EOF) break;
+		if (t.type === TT_URL) {
+			if (t.contentEnd > t.contentStart) {
+				result.push([
+					input.slice(t.contentStart, t.contentEnd),
+					t.contentStart,
+					t.contentEnd
+				]);
 			}
-			// After descriptor
-			else if (state === "after descriptor") {
-				// Do the following, depending on the value of charCode:
-				if (isASCIIWhitespace(charCode)) {
-					// Space character: Stay in this state.
-				}
-				// EOF: Jump to the step labeled descriptor parser.
-				else if (Number.isNaN(charCode)) {
-					parseDescriptors();
-					return;
-				}
-				// Anything else
-				// Set state to in descriptor. Set position to the previous character in input.
-				else {
-					state = "in descriptor";
-					position -= 1;
+		} else if (
+			t.type === TT_FUNCTION &&
+			equalsLowerCase(input.slice(t.start, t.end - 1), "url")
+		) {
+			let s = ts.consume();
+			while (s.type === TT_WHITESPACE) s = ts.consume();
+			if (s.type === TT_STRING) {
+				const quote = input.charCodeAt(s.start);
+				const innerStart = s.start + 1;
+				// Drop the closing quote, unless the string is unterminated at EOF.
+				const innerEnd =
+					input.charCodeAt(s.end - 1) === quote ? s.end - 1 : s.end;
+				if (innerEnd > innerStart) {
+					result.push([
+						input.slice(innerStart, innerEnd),
+						innerStart,
+						innerEnd
+					]);
 				}
 			}
-
-			// Advance position to the next character in input.
-			position += 1;
 		}
 	}
-
-	// 3. Let candidates be an initially empty source set.
-	// const candidates = []; // Moved to top
-
-	// 4. Splitting loop: Collect a sequence of characters that are space
-	//    characters or U+002C COMMA characters. If any U+002C COMMA characters
-	//    were collected, that is a parse error.
-
-	while (true) {
-		collectCharacters(LEADING_COMMAS_OR_SPACES_REGEXP);
-
-		// 5. If position is past the end of input, return candidates and abort these steps.
-		if (position >= inputLength) {
-			if (candidates.length === 0) {
-				throw new Error("Must contain one or more image candidate strings");
-			}
-
-			// (we're done, this is the sole return path)
-			return candidates;
-		}
-
-		// 6. Collect a sequence of characters that are not space characters,
-		//    and let that be url.
-		start = position;
-		url = collectCharacters(LEADING_NOT_SPACES);
-
-		// 7. Let descriptors be a new empty list.
-		descriptors = [];
-
-		// 8. If url ends with a U+002C COMMA character (,), follow these sub steps:
-		//		(1). Remove all trailing U+002C COMMA characters from url. If this removed
-		//         more than one character, that is a parse error.
-		if (url && url.charCodeAt(url.length - 1) === COMMA) {
-			url = url.replace(TRAILING_COMMAS_REGEXP, "");
-
-			// (Jump ahead to step 9 to skip tokenization and just push the candidate).
-			parseDescriptors();
-		}
-		//	Otherwise, follow these sub steps:
-		else {
-			tokenize();
-		}
-
-		// 16. Return to the step labeled splitting loop.
-	}
+	return result;
 };
 
 /**
@@ -471,9 +279,12 @@ const META = new Map([
 			"msapplication-wide310x150logo",
 			"msapplication-square310x310logo",
 			"msapplication-config",
-			// TODO Do we need to parser it?
-			// "msapplication-task",
-			"twitter:image"
+			// Only the `icon-uri` part is an asset, see `parseMsapplicationTask`
+			"msapplication-task",
+			"twitter:image",
+			"twitter:image:src",
+			// Legacy preview-image hint
+			"thumbnail"
 		])
 	],
 	[
@@ -511,14 +322,33 @@ const META = new Map([
  * @returns {boolean} true when need to parse, otherwise false
  */
 const filterLinkItemprop = (attributes) => {
-	const value = getAttributeValue(attributes, "itemprop");
-	if (!value) return false;
+	const itemprop = getAttributeValue(attributes, "itemprop");
+	if (!itemprop) return false;
 	const allowedAttributes = META.get("itemprop");
 	if (!allowedAttributes) return false;
 
-	return allowedAttributes.has(value.trim().toLowerCase());
+	return allowedAttributes.has(itemprop.trim().toLowerCase());
 };
 
+// `<link rel>` values whose `href`/`imagesrcset` webpack treats as a reference.
+const ALLOWED_LINK_RELS = new Set([
+	"stylesheet",
+	"icon",
+	"mask-icon",
+	"apple-touch-icon",
+	"apple-touch-icon-precomposed",
+	"apple-touch-startup-image",
+	// TODO the manifest file is emitted as an asset, but its JSON
+	// `icons`/`screenshots`/`shortcuts[].icons` URLs aren't parsed — needs a
+	// dedicated webmanifest module type (parser + generator), not a table entry.
+	"manifest",
+	"prefetch",
+	"preload",
+	"modulepreload",
+	// Legacy preview-image hint (`<link rel="image_src" href>`)
+	"image_src"
+]);
+
 /**
  * @param {Map<string, string>} attributes attributes
  * @returns {boolean} true when need to parse, otherwise false
@@ -526,21 +356,11 @@ const filterLinkItemprop = (attributes) => {
 const filterLinkHref = (attributes) => {
 	const rel = getAttributeValue(attributes, "rel");
 	if (!rel) return false;
-	const usedRels = rel.trim().toLowerCase().split(" ").filter(Boolean);
-	const allowedRels = [
-		"stylesheet",
-		"icon",
-		"mask-icon",
-		"apple-touch-icon",
-		"apple-touch-icon-precomposed",
-		"apple-touch-startup-image",
-		"manifest",
-		"prefetch",
-		"preload",
-		"modulepreload"
-	];
-
-	return allowedRels.some((value) => usedRels.includes(value));
+	const usedRels = rel.trim().toLowerCase().split(/\s+/);
+	for (let i = 0; i < usedRels.length; i++) {
+		if (ALLOWED_LINK_RELS.has(usedRels[i])) return true;
+	}
+	return false;
 };
 
 /**
@@ -559,13 +379,25 @@ const filterMetaContent = (attributes) => {
 		const [key, allowedNames] = item;
 		const name = getAttributeValue(attributes, key);
 		if (!name) continue;
-
-		return allowedNames.has(name.trim().toLowerCase());
+		// Check every present attribute, not only the first one
+		if (allowedNames.has(name.trim().toLowerCase())) return true;
 	}
 
 	return false;
 };
 
+/**
+ * `<param value>` (obsolete `<object>`/`<applet>` child) is only a URL when
+ * `valuetype="ref"`; otherwise it's an opaque string.
+ * @param {Map<string, string>} attributes attributes
+ * @returns {boolean} true when `value` is a URL reference
+ */
+const filterParamRef = (attributes) => {
+	const valuetype = getAttributeValue(attributes, "valuetype");
+	if (!valuetype) return false;
+	return valuetype.trim().toLowerCase() === "ref";
+};
+
 /**
  * @param {Map<string, string>} attributes attributes
  * @returns {boolean} true when the script element opts into ES module semantics
@@ -619,216 +451,394 @@ const isLinkStylesheet = (attributes) => {
 	return rel.trim().toLowerCase().split(/\s+/).includes("stylesheet");
 };
 
-/** @type {Map<string, Map<string, { parse: (input: string) => ParsedSource[] | undefined, filter?: (attributes: Map<string, string>) => boolean, entry?: boolean | ((attributes: Map<string, string>) => boolean), entryCategory?: string }>>} */
-const DEFAULT_SOURCES = new Map([
-	[
-		"audio",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	[
-		"embed",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	[
-		"img",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			],
-			[
-				"srcset",
-				{
-					parse: parseSrcset
-				}
-			]
-		])
-	],
-	[
-		"input",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	[
-		"link",
-		new Map([
-			[
-				"href",
-				{
-					parse: parseSrc,
-					filter: filterLinkUnion,
-					entry: isLinkModulePreload,
-					entryCategory: "esm"
-				}
-			],
-			[
-				"imagesrcset",
-				{
-					parse: parseSrcset,
-					filter: filterLinkHref
-				}
-			]
-		])
-	],
-	[
-		"meta",
-		new Map([
-			[
-				"content",
-				{
-					parse: parseSrc,
-					filter: filterMetaContent
-				}
-			]
-		])
-	],
-	[
-		"object",
-		new Map([
-			[
-				"data",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	[
-		"script",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc,
-					// Only executable-JS scripts become entries. Non-JS
-					// `<script>` types (e.g. `application/ld+json`,
-					// `importmap`) fall through to HtmlSourceDependency so
-					// the browser keeps seeing them as data blocks, with
-					// the asset URL rewritten like any other resource.
-					entry: isExecutableJsScript
-				}
-			]
-		])
-	],
-	[
-		"source",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			],
-			[
-				"srcset",
-				{
-					parse: parseSrcset
-				}
-			]
-		])
-	],
-	[
-		"track",
-		new Map([
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	[
-		"video",
-		new Map([
-			[
-				"poster",
-				{
-					parse: parseSrc
-				}
-			],
-			[
-				"src",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	// SVG
-	[
-		"image",
-		new Map([
-			[
-				"xlink:href",
-				{
-					parse: parseSrc
-				}
-			],
-			[
-				"href",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	],
-	[
-		"use",
-		new Map([
-			[
-				"xlink:href",
-				{
-					parse: parseSrc
-				}
-			],
-			[
-				"href",
-				{
-					parse: parseSrc
-				}
-			]
-		])
-	]
-]);
+/** @typedef {"src" | "srcset" | "css-url" | "msapplication-task" | "script" | "script-module" | "modulepreload" | "stylesheet" | "stylesheet-style" | "stylesheet-style-attribute" | "srcdoc"} SourceType */
+/** Entry types: a `type` whose value is loaded as its own compilation entry chunk. */
+/** @typedef {"script" | "script-module" | "modulepreload" | "stylesheet"} EntrySourceType */
+/** @typedef {SourceType | ((attrs: Map<string, string>, css: boolean) => SourceType)} SourceTypeOrResolver */
+/** @typedef {(attributes: Map<string, string>, value: string) => boolean} SourceFilter */
+/** @typedef {{ tag?: string, attribute: string, type: SourceType, filter?: SourceFilter }} SourceEntry */
+/** A `type` plus optional gates: `filter` (the decoded attribute map + the decoded value; return false to skip — covers both cross-attribute checks and cheap value checks) and `namespace` (restrict to an element namespace, e.g. SVG). */
+/** @typedef {{ type: SourceTypeOrResolver, filter?: SourceFilter, namespace?: number }} SourceItem */
+/** A source whose value is the element's text content (a `<style>`/`<script>` body) rather than an attribute. */
+/** @typedef {{ type: SourceTypeOrResolver, filter?: (attributes: Map<string, string>) => boolean }} ContentSourceItem */
+
+/**
+ * Builds a null-prototype dictionary from the given property bags
+ * (later bags win; `undefined` bags are skipped). A null prototype is
+ * essential here: the tables are indexed by HTML tag and attribute
+ * names, so a plain object would let names like `__proto__`,
+ * `constructor`, or `toString` resolve to inherited values at lookup
+ * time — producing bogus dependencies and letting `sources: false` be
+ * bypassed.
+ * @param {...(Record<string, EXPECTED_ANY> | undefined)} bags property bags
+ * @returns {EXPECTED_ANY} null-prototype dictionary
+ */
+const dict = (...bags) => Object.assign(Object.create(null), ...bags);
+
+// Shared `SourceItem` singletons used by the built-in defaults —
+// keeping one instance per kind stabilizes V8's hidden classes across
+// lookups in the walk. `srcset` is its own type; the walk picks the
+// `parseSrcset` parser for it and otherwise treats it like `src`.
+/** @type {SourceItem} */
+const PLAIN_SRC = { type: "src", filter: undefined };
+/** @type {SourceItem} */
+const PLAIN_SRCSET = { type: "srcset", filter: undefined };
+
+/**
+ * `<link href>` is polymorphic: `rel="modulepreload"` → an ESM
+ * preload entry, `rel="stylesheet"` (with `experiments.css`) → a CSS
+ * entry, otherwise a plain asset URL.
+ * @type {SourceItem}
+ */
+const LINK_HREF = {
+	type: (attrs, css) => {
+		if (isLinkModulePreload(attrs)) return "modulepreload";
+		if (css && isLinkStylesheet(attrs)) return "stylesheet";
+		return "src";
+	},
+	filter: filterLinkUnion
+};
+
+/**
+ * `<script src>`: non-JS types (e.g. `application/ld+json`,
+ * `importmap`) stay plain asset URLs so the browser keeps seeing them
+ * as data blocks; `type="module"` opts into the ESM entry chunk;
+ * everything else in `JS_SCRIPT_TYPES` is a classic script.
+ * @type {SourceItem}
+ */
+const SCRIPT_SRC = {
+	type: (attrs) =>
+		isExecutableJsScript(attrs)
+			? isModuleScript(attrs)
+				? "script-module"
+				: "script"
+			: "src",
+	filter: undefined
+};
+
+/**
+ * `<meta content>`: most referenced names hold a single URL (`src`); the
+ * `msapplication-task` value is a `;`-delimited list whose `icon-uri` part
+ * is the only asset, so it selects the `msapplication-task` parser.
+ * @type {SourceItem}
+ */
+const META_CONTENT = {
+	type: (attrs) => {
+		const name = attrs.get("name");
+		return name !== undefined &&
+			name.trim().toLowerCase() === "msapplication-task"
+			? "msapplication-task"
+			: "src";
+	},
+	filter: filterMetaContent
+};
+
+// Built-in lookup table, written directly in its final resolved shape:
+// `DEFAULT_SOURCES_BY_TAG[tag][attribute] = item`. No module-load
+// loop, no separate array representation — every parser created with
+// the default `sources` config just references this table and pays
+// zero per-parser work.
+/** @type {Record<string, Record<string, SourceItem>>} */
+const DEFAULT_SOURCES_BY_TAG = dict({
+	// Obsolete Java-applet element; `code`/`object` are single class/object URLs.
+	applet: dict({ code: PLAIN_SRC, object: PLAIN_SRC }),
+	audio: dict({ src: PLAIN_SRC }),
+	// Deprecated presentational `background` attribute — an image URL.
+	body: dict({ background: PLAIN_SRC }),
+	embed: dict({ src: PLAIN_SRC }),
+	// `srcdoc` is an entity-encoded HTML document parsed and rewritten as a
+	// nested module — its handling lives in the generic source loop so the
+	// `sources` option can re-target it (or other tags/attributes) freely.
+	iframe: dict({ srcdoc: { type: "srcdoc", filter: undefined } }),
+	img: dict({ src: PLAIN_SRC, srcset: PLAIN_SRCSET }),
+	input: dict({ src: PLAIN_SRC }),
+	link: dict({
+		href: LINK_HREF,
+		imagesrcset: { type: "srcset", filter: filterLinkHref }
+	}),
+	meta: dict({ content: META_CONTENT }),
+	// MathML `<mglyph src>` references an image.
+	mglyph: dict({ src: PLAIN_SRC }),
+	// `classid` is a single object URI (`codebase`/`archive` are a base/list, skipped).
+	object: dict({ data: PLAIN_SRC, classid: PLAIN_SRC }),
+	// Obsolete `<param valuetype="ref" value="url">` child of `<object>`.
+	param: dict({ value: { type: "src", filter: filterParamRef } }),
+	// `href`/`xlink:href` reference the source of SVG `<script>` elements
+	script: dict({
+		src: SCRIPT_SRC,
+		href: SCRIPT_SRC,
+		"xlink:href": SCRIPT_SRC
+	}),
+	source: dict({ src: PLAIN_SRC, srcset: PLAIN_SRCSET }),
+	// Deprecated presentational `background` attribute — an image URL.
+	table: dict({ background: PLAIN_SRC }),
+	td: dict({ background: PLAIN_SRC }),
+	th: dict({ background: PLAIN_SRC }),
+	track: dict({ src: PLAIN_SRC }),
+	video: dict({ poster: PLAIN_SRC, src: PLAIN_SRC }),
+	// SVG. Tag names match the tree builder's adjusted camelCase
+	// (`feImage`/`textPath`/`linearGradient`/`radialGradient`). `href`/
+	// `xlink:href` reference another element/resource; fragment-only `#id`
+	// values are left untouched, so only external `file.svg#id` is rewritten.
+	// `color-profile`'s `xlink:href` points at an external ICC profile file.
+	"color-profile": dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	feImage: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	filter: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	image: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	linearGradient: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	mpath: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	pattern: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	radialGradient: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	textPath: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC }),
+	use: dict({ "xlink:href": PLAIN_SRC, href: PLAIN_SRC })
+	// CSS `url(...)` references in SVG presentation attributes (fill, stroke,
+	// clip-path, …) are handled separately during the walk (`parseCssUrls`).
+});
+
+// SVG presentation attributes (`fill`, `stroke`, …) carry CSS `url(...)`
+// FuncIRIs; `parseCssUrls` extracts external refs as assets (internal
+// `url(#id)` is left untouched). They apply to every SVG-namespace element, so
+// the item is `namespace`-gated rather than placed in a tag bucket. The filter
+// is a cheap pre-check skipping the common plain values (`red`, `none`, `#fff`).
+/** @type {SourceItem} */
+const SVG_CSS_URL = {
+	type: "css-url",
+	filter: (attributes, value) => FUNC_IRI_URL_REGEXP.test(value),
+	namespace: NS_SVG
+};
+
+// The global `style=""` attribute (a CSS declaration list), available on every
+// tag and even with `sources: false`. Like every `stylesheet-style*` source it
+// only emits when `experiments.css` is on (checked where the dependency is
+// created); the filter is a cheap pre-check skipping declarations without a
+// `url()`/`src()`/… .
+/** @type {SourceItem} */
+const STYLE_ATTRIBUTE = {
+	type: "stylesheet-style-attribute",
+	filter: (attributes, value) => STYLE_ATTR_URL_REGEXP.test(value)
+};
+
+// Any-tag sources — applied to every element as a fallback and folded into
+// each tag bucket, so the walk resolves one object per element and reads one
+// property per attribute. `DEFAULT` (svg presentation + style) is active
+// unless `sources: false`; only the always-on style attribute survives `false`.
+/** @type {Record<string, SourceItem>} */
+const DEFAULT_ANY_SOURCES = dict({ style: STYLE_ATTRIBUTE });
+for (const name of [
+	"fill",
+	"stroke",
+	"clip-path",
+	"mask",
+	"filter",
+	"marker",
+	"marker-start",
+	"marker-mid",
+	"marker-end",
+	"cursor"
+]) {
+	DEFAULT_ANY_SOURCES[name] = SVG_CSS_URL;
+}
+/** @type {Record<string, SourceItem>} */
+const ALWAYS_ANY_SOURCES = dict({ style: STYLE_ATTRIBUTE });
+
+// Reserved key holding the any-tag sources inside the per-tag table — the
+// schema forbids an empty `tag`, so it never collides with a real tag. The
+// walk falls back to it for elements without their own bucket.
+const ANY_TAG = "";
+
+/**
+ * Folds the any-tag sources into every per-tag bucket (tag-specific entries
+ * win) and stores them under `ANY_TAG`, so the whole source model is one
+ * object and the walk's per-attribute lookup is a single property read.
+ * @param {Record<string, Record<string, SourceItem>>} byTag per-tag sources
+ * @param {Record<string, SourceItem>} any any-tag sources
+ * @returns {Record<string, Record<string, SourceItem>>} folded table
+ */
+const foldAnySources = (byTag, any) => {
+	for (const tag of Object.keys(byTag)) {
+		byTag[tag] = dict(any, byTag[tag]);
+	}
+	byTag[ANY_TAG] = any;
+	return byTag;
+};
+
+// Default table (per-tag defaults + any-tag sources folded in) and the
+// `sources: false` table (only the always-on `style=""` attribute). Both are
+// precomputed so the common cases reference them with zero per-parser work.
+/** @type {Record<string, Record<string, SourceItem>>} */
+const DEFAULT_SOURCES_FOLDED = foldAnySources(
+	dict(DEFAULT_SOURCES_BY_TAG),
+	DEFAULT_ANY_SOURCES
+);
+/** @type {Record<string, Record<string, SourceItem>>} */
+const DISABLED_SOURCES_FOLDED = foldAnySources(dict(), ALWAYS_ANY_SOURCES);
+
+/**
+ * Inline `<script>` body: classic JS unless `type="module"` opts into ESM.
+ * @param {Map<string, string>} attrs attributes
+ * @returns {SourceType} the entry type for the inline script
+ */
+const scriptContentType = (attrs) =>
+	isModuleScript(attrs) ? "script-module" : "script";
+
+/**
+ * Inline `<script>` body: only an executable JS block with no external source
+ * carries content webpack should bundle.
+ * @param {Map<string, string>} attrs attributes
+ * @returns {boolean} true when the inline body should be bundled
+ */
+const scriptContentFilter = (attrs) =>
+	!attrs.has("src") &&
+	!attrs.has("href") &&
+	!attrs.has("xlink:href") &&
+	isExecutableJsScript(attrs);
+
+/**
+ * `<style>` body is a stylesheet only when its `type` is empty or `text/css`.
+ * @param {Map<string, string>} attrs attributes
+ * @returns {boolean} true when the body is CSS
+ */
+const styleContentFilter = (attrs) => {
+	const type = attrs.get("type");
+	if (type === undefined) return true;
+	const t = type.trim().toLowerCase();
+	return t === "" || t === "text/css";
+};
+
+// Element-body sources, independent of the `sources` option (even `sources:
+// false`): inline `<script>` bodies are always processed; the `<style>` body
+// only emits when `experiments.css` is on (checked where the dependency is
+// created, like every `stylesheet-style*` source).
+/** @type {Record<string, ContentSourceItem>} */
+const CONTENT_SOURCES = dict({
+	script: { type: scriptContentType, filter: scriptContentFilter },
+	style: { type: "stylesheet-style", filter: styleContentFilter }
+});
 
 class HtmlParser extends Parser {
 	/**
 	 * Creates an instance of HtmlParser.
-	 * @param {(string | typeof import("../util/Hash"))=} hashFunction algorithm or constructor used by `output.hashFunction`; falls back to the default when omitted
-	 * @param {string=} context compilation context used to contextify the HTML module's identifier when seeding the entry-name hash
-	 * @param {boolean=} outputModule whether `output.module` is enabled; when true, classic `<script src>` tags get `type="module"` auto-inserted so the rewritten src can load the emitted ES module chunk
-	 * @param {boolean=} css whether `experiments.css` is enabled; when true, inline `<style>` bodies are routed through the CSS pipeline as `data:text/css` modules
+	 * @param {HtmlParserOptions} options parser options (from `module.parser.html`; always passed by the `createParser` hook)
 	 */
-	constructor(hashFunction, context, outputModule, css) {
+	constructor(options) {
 		super();
 		this.magicCommentContext = createMagicCommentContext();
-		this.hashFunction = hashFunction;
-		this.context = context;
-		this.outputModule = outputModule;
-		this.css = css;
+		// Read by HtmlModulesPlugin's `processResult` hook, which transforms
+		// the module source before it is stored and parsed.
+		/** @type {HtmlTemplateFunction | undefined} */
+		this.template = options.template;
+		// One source model: a per-tag table that also holds the any-tag sources
+		// under `ANY_TAG`. The common cases reference precomputed tables.
+		/** @type {Record<string, Record<string, SourceItem>>} */
+		this.sourcesByTag = DEFAULT_SOURCES_FOLDED;
+
+		const sources = options.sources;
+		if (sources === undefined || sources === true) return;
+		if (sources === false) {
+			// Only the always-on `style=""` attribute survives; nothing else is
+			// extracted (svg presentation, `<script src>`, `<link>` entries, …).
+			this.sourcesByTag = DISABLED_SOURCES_FOLDED;
+			return;
+		}
+
+		// User array — `"..."` anywhere opts the per-tag defaults in as the
+		// base; the built-in any-tag sources (svg presentation + style) are
+		// always present. A user entry with no `tag` is an any-tag source (e.g.
+		// `{ attribute: "data-style", type: "stylesheet-style-attribute" }`).
+		// User entries override regardless of position. `dict()` keeps every
+		// table null-prototype (see its doc), and per-tag writes rebuild the
+		// bucket so the aliased default buckets stay intact.
+		/** @type {Record<string, Record<string, SourceItem>>} */
+		const byTag = sources.includes("...")
+			? dict(DEFAULT_SOURCES_BY_TAG)
+			: dict();
+		/** @type {Record<string, SourceItem>} */
+		const any = dict(DEFAULT_ANY_SOURCES);
+		for (const entry of sources) {
+			if (entry === "...") continue;
+			/** @type {SourceItem} */
+			const item = {
+				type: entry.type,
+				filter: typeof entry.filter === "function" ? entry.filter : undefined
+			};
+			const attr = entry.attribute.toLowerCase();
+			if (entry.tag === undefined) {
+				any[attr] = item;
+			} else {
+				const tag = entry.tag.toLowerCase();
+				byTag[tag] = dict(byTag[tag], { [attr]: item });
+				// The AST carries adjusted camelCase names for foreign-content
+				// tags (e.g. `feImage`) — register the entry under both.
+				const adjusted = SVG_TAG_ADJUST[tag];
+				if (adjusted !== undefined) {
+					byTag[adjusted] = dict(byTag[adjusted], { [attr]: item });
+				}
+			}
+		}
+		/** @type {Record<string, Record<string, SourceItem>>} */
+		this.sourcesByTag = foldAnySources(byTag, any);
+	}
+
+	/**
+	 * Runs the `template` option over the source and returns the transformed
+	 * html. Called from HtmlModulesPlugin's `processResult`, where the return
+	 * value becomes the module's stored source so the parser (which records
+	 * dependency offsets against it) and the generator (which renders from
+	 * `module.originalSource()`) stay in agreement.
+	 * @param {string | Buffer} source the original source
+	 * @param {NormalModule} module the html module
+	 * @returns {string | Buffer} the transformed source
+	 */
+	applyTemplate(source, module) {
+		if (!this.template) return source;
+		// `processResult` runs after `_doBuild` has initialized these
+		// dependency sets, so they are always present here.
+		const buildInfo = /** @type {BuildInfo} */ (module.buildInfo);
+		const fileDependencies = /** @type {FileSystemDependencies} */ (
+			buildInfo.fileDependencies
+		);
+		const contextDependencies = /** @type {FileSystemDependencies} */ (
+			buildInfo.contextDependencies
+		);
+		const missingDependencies = /** @type {FileSystemDependencies} */ (
+			buildInfo.missingDependencies
+		);
+		const transformed = this.template(
+			typeof source === "string" ? source : source.toString("utf8"),
+			{
+				module,
+				resource: module.resource,
+				addDependency: (dependency) => {
+					fileDependencies.add(dependency);
+				},
+				addContextDependency: (dependency) => {
+					contextDependencies.add(dependency);
+				},
+				addMissingDependency: (dependency) => {
+					missingDependencies.add(dependency);
+				},
+				addBuildDependency: (dependency) => {
+					if (buildInfo.buildDependencies === undefined) {
+						buildInfo.buildDependencies = new LazySet();
+					}
+					buildInfo.buildDependencies.add(dependency);
+				},
+				emitWarning: (warning) =>
+					module.addWarning(
+						warning instanceof Error ? warning : new WebpackError(warning)
+					),
+				emitError: (error) =>
+					module.addError(
+						error instanceof Error ? error : new WebpackError(error)
+					)
+			}
+		);
+		if (typeof transformed !== "string") {
+			throw new Error(
+				"The `template` html parser option must return a string."
+			);
+		}
+		return transformed;
 	}
 
 	/**
@@ -850,6 +860,10 @@ class HtmlParser extends Parser {
 		const locConverter = new LocConverter(source);
 
 		const module = state.module;
+		const compilation = state.compilation;
+		const { hashFunction, module: outputModule } = compilation.outputOptions;
+		const context = compilation.compiler.context;
+		const css = Boolean(compilation.options.experiments.css);
 
 		// Stable, per-HTML-module prefix used when generating entry names for
 		// script src / modulepreload references so they don't collide across
@@ -862,28 +876,57 @@ class HtmlParser extends Parser {
 		/** @type {string} */
 		const resource =
 			/** @type {EXPECTED_ANY} */ (module).resource || module.identifier();
-		const moduleHash = createHash(this.hashFunction || "md4")
-			.update(this.context ? contextify(this.context, resource) : resource)
+		const moduleHash = createHash(hashFunction || "md4")
+			.update(context ? contextify(context, resource) : resource)
 			.digest("hex")
 			.slice(0, 8);
 
-		/** @typedef {{ nameStart: number, nameEnd: number, valueStart: number, valueEnd: number }} AttrToken */
+		// Script src / modulepreload references are collected per-type
+		// during the walk; HtmlModulesPlugin later turns them into real
+		// entries. `script` and `script-module` entries are chained via a
+		// leader-only dependOn so they share a runtime.
+		// `<link rel="modulepreload">` entries are kept independent — they
+		// must preload without running, so they can never become a runtime
+		// leader that other entries would import.
+		/**
+		 * @typedef {object} EntryScriptInfo
+		 * @property {string} request
+		 * @property {string} entryName
+		 * @property {"script" | "script-module" | "modulepreload" | "stylesheet"} type
+		 */
+		/** @type {EntryScriptInfo[]} */
+		const scriptEntries = [];
+		/** @type {EntryScriptInfo[]} */
+		const scriptModuleEntries = [];
+		/** @type {EntryScriptInfo[]} */
+		const modulePreloadEntries = [];
+		/** @type {EntryScriptInfo[]} */
+		const stylesheetEntries = [];
+
+		// Offset of the first script tag; anchors injected stylesheet `<link>`s
+		// before it so a later entry's CSS still loads ahead of every script.
+		let firstScriptStart = -1;
+
+		let nextEntryIndex = 0;
+
+		/**
+		 * Tracks the `webpackIgnore` value from the most recent comment that
+		 * appears before the next tag. Reset whenever a tag is emitted or a
+		 * comment without a `webpackIgnore` value is encountered.
+		 * @type {boolean | undefined}
+		 */
+		let pendingWebpackIgnore;
 
-		/** @type {AttrToken[]} */
-		const pendingAttributes = [];
+		const magicCommentContext = this.magicCommentContext;
 
 		/**
-		 * Reconciles the rewritten `<script>` tag's `type` attribute with the
-		 * emitted chunk's actual format. Used by both the `<script src>` and
-		 * inline `<script>` paths so the two stay in sync.
-		 * @param {AttrToken | undefined} typeAttr existing `type` attribute, if any
-		 * @param {number} nameEnd position right after `<script` (for inserts)
-		 * @param {"classic" | "esm-script"} kind chunk kind decided by the parser
-		 * @param {string} input full source string
-		 * @returns {void}
+		 * @param {import("./syntax").HtmlAttribute | undefined} typeAttr type attribute
+		 * @param {number} nameEnd end offset of the tag name
+		 * @param {string} type type of the script
+		 * @param {string} input source string
 		 */
-		const reconcileScriptTypeAttr = (typeAttr, nameEnd, kind, input) => {
-			if (this.outputModule && kind === "classic") {
+		const reconcileScriptTypeAttr = (typeAttr, nameEnd, type, input) => {
+			if (outputModule && type === "script") {
 				// Chunk is an ES module; upgrade the tag.
 				if (typeAttr && typeAttr.valueStart !== -1) {
 					module.addPresentationalDependency(
@@ -897,7 +940,7 @@ class HtmlParser extends Parser {
 						new ConstDependency(' type="module"', nameEnd)
 					);
 				}
-			} else if (!this.outputModule && kind === "esm-script" && typeAttr) {
+			} else if (!outputModule && type === "script-module" && typeAttr) {
 				// Chunk is a classic IIFE; drop `type="module"` so the
 				// browser doesn't load it under module semantics.
 				let attrEnd;
@@ -911,8 +954,6 @@ class HtmlParser extends Parser {
 				} else {
 					attrEnd = typeAttr.valueEnd;
 				}
-				// Consume one leading whitespace char so we don't leave a
-				// double space between `<script` and the next attribute.
 				let attrStart = typeAttr.nameStart;
 				if (
 					attrStart > 0 &&
@@ -926,552 +967,520 @@ class HtmlParser extends Parser {
 			}
 		};
 
-		// Inline `<script>` body extraction is deferred to the matching
-		// `closeTag` event so the walker's script-data state machine
-		// (including its escaped/double-escaped sub-states) decides where
-		// the body ends. This is the spec-compliant way to find the close
-		// — a plain `</script>` regex would split too early inside
-		// `<!--<script>…</script>-->` patterns.
-		/** @type {null | { contentStart: number, attrs: Map<string, string>, typeAttr: AttrToken | undefined, nameEnd: number }} */
-		let pendingInlineScript = null;
-
-		// Script src / modulepreload references are collected per-category
-		// during the walk; HtmlModulesPlugin later turns them into real
-		// entries. Classic <script src> and <script type="module" src> are
-		// chained via a leader-only dependOn so they share a runtime.
-		// `<link rel="modulepreload">` entries are kept independent — they
-		// must preload without running, so they can never become a runtime
-		// leader that other entries would import.
 		/**
-		 * @typedef {object} EntryScriptInfo
-		 * @property {string} request
-		 * @property {string} entryName
-		 * @property {"classic" | "esm-script" | "modulepreload" | "stylesheet"} kind
+		 * @param {string} mime mime type
+		 * @param {string} text inline text
+		 * @returns {string} a `data:` request for the text
 		 */
-		/** @type {EntryScriptInfo[]} */
-		const classicEntries = [];
-		/** @type {EntryScriptInfo[]} */
-		const esmScriptEntries = [];
-		/** @type {EntryScriptInfo[]} */
-		const modulePreloadEntries = [];
-		/** @type {EntryScriptInfo[]} */
-		const stylesheetEntries = [];
-
-		let nextEntryIndex = 0;
+		const dataUri = (mime, text) =>
+			`data:${mime};base64,${Buffer.from(text, "utf8").toString("base64")}`;
 
 		/**
-		 * Tracks the `webpackIgnore` value from the most recent comment that
-		 * appears before the next tag. Reset whenever a tag is emitted or a
-		 * comment without a `webpackIgnore` value is encountered.
-		 * @type {boolean | undefined}
+		 * @param {ConstDependency | HtmlSourceDependency | HtmlEntryDependency | HtmlInlineStyleDependency | HtmlInlineScriptDependency | HtmlInlineHtmlDependency} dep dependency
+		 * @param {number} start raw start offset
+		 * @param {number} end raw end offset
 		 */
-		let pendingWebpackIgnore;
-
-		const magicCommentContext = this.magicCommentContext;
+		const setLoc = (dep, start, end) => {
+			const s = locConverter.get(start);
+			const e = locConverter.get(end);
+			dep.setLoc(s.line, s.column, e.line, e.column);
+		};
 
 		// TODO implement full HTML parser (WASM)
-		walkHtmlTokens(source, 0, {
-			comment: (input, start, end) => {
-				// Only proper `<!-- ... -->` comments carry magic comments.
-				// `walkHtmlTokens` also dispatches this callback for bogus
-				// comments such as `<!DOCTYPE …>` and `<?…>`, which must not
-				// be parsed as magic comments.
-				if (
-					end - start < 7 ||
-					input.charCodeAt(start) !== 0x3c /* < */ ||
-					input.charCodeAt(start + 1) !== 0x21 /* ! */ ||
-					input.charCodeAt(start + 2) !== 0x2d /* - */ ||
-					input.charCodeAt(start + 3) !== 0x2d /* - */ ||
-					input.charCodeAt(end - 1) !== 0x3e /* > */ ||
-					input.charCodeAt(end - 2) !== 0x2d /* - */ ||
-					input.charCodeAt(end - 3) !== 0x2d /* - */
-				) {
-					pendingWebpackIgnore = undefined;
-					return end;
-				}
-				const contentStart = start + 4;
-				const contentEnd = end - 3;
-				const value = input.slice(contentStart, contentEnd);
-				if (!webpackCommentRegExp.test(value)) {
-					pendingWebpackIgnore = undefined;
-					return end;
-				}
-				/** @type {Record<string, EXPECTED_ANY>} */
-				let options;
-				try {
-					options = vm.runInContext(
-						`(function(){return {${value}};})()`,
-						magicCommentContext
-					);
-				} catch (err) {
-					const { line: sl, column: sc } = locConverter.get(start);
-					const { line: el, column: ec } = locConverter.get(end);
-					module.addWarning(
-						new CommentCompilationWarning(
-							`Compilation error while processing magic comment(-s): /*${value}*/: ${
-								/** @type {Error} */ (err).message
-							}`,
-							{
-								start: { line: sl, column: sc },
-								end: { line: el, column: ec }
-							}
-						)
-					);
-					pendingWebpackIgnore = undefined;
-					return end;
-				}
-				if (options.webpackIgnore === undefined) {
-					pendingWebpackIgnore = undefined;
-					return end;
-				}
-				if (typeof options.webpackIgnore !== "boolean") {
-					const { line: sl, column: sc } = locConverter.get(start);
-					const { line: el, column: ec } = locConverter.get(end);
-					module.addWarning(
-						new UnsupportedFeatureWarning(
-							`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
-							{
-								start: { line: sl, column: sc },
-								end: { line: el, column: ec }
-							}
-						)
-					);
-					pendingWebpackIgnore = undefined;
-					return end;
-				}
-				pendingWebpackIgnore = options.webpackIgnore;
-				return end;
-			},
-			attribute: (
-				input,
-				nameStart,
-				nameEnd,
-				valueStart,
-				valueEnd,
-				quoteType
-			) => {
-				pendingAttributes.push({ nameStart, nameEnd, valueStart, valueEnd });
-				if (valueStart === -1) return nameEnd;
-				return quoteType !== walkHtmlTokens.QUOTE_NONE
-					? valueEnd + 1
-					: valueEnd;
-			},
-			closeTag: (input, start, end, nameStart, nameEnd) => {
-				pendingWebpackIgnore = undefined;
-				if (pendingInlineScript) {
-					const elName = input.slice(nameStart, nameEnd).toLowerCase();
-					if (elName === "script") {
-						const ps = pendingInlineScript;
-						pendingInlineScript = null;
-						const contentStart = ps.contentStart;
-						const contentEnd = start; // start of `</script>`
-						const jsContent = input.slice(contentStart, contentEnd);
-						if (jsContent.trim() === "") return end;
-
-						// Base64-encode the JS body so the data URI round-trips
-						// arbitrary JavaScript text, including non-ASCII source
-						// (`decodeDataURI` decodes non-base64 bodies as ASCII,
-						// which would corrupt Unicode string literals or
-						// identifiers).
-						const request = `data:text/javascript;base64,${Buffer.from(
-							jsContent,
-							"utf8"
-						).toString("base64")}`;
-
-						const useEsmEntry = isModuleScript(ps.attrs);
-						const entryName = `__html_${moduleHash}_${nextEntryIndex++}`;
-						/** @type {"classic" | "esm-script"} */
-						const kind = useEsmEntry ? "esm-script" : "classic";
-						const { line: sl, column: sc } = locConverter.get(contentStart);
-						const { line: el, column: ec } = locConverter.get(contentEnd);
-						const dep = new HtmlInlineScriptDependency(
-							request,
-							ps.nameEnd,
-							[contentStart, contentEnd],
-							entryName,
-							useEsmEntry ? "esm" : "commonjs"
-						);
-						dep.setLoc(sl, sc, el, ec);
-						module.addPresentationalDependency(dep);
-						reconcileScriptTypeAttr(ps.typeAttr, ps.nameEnd, kind, input);
-						const collection =
-							kind === "classic" ? classicEntries : esmScriptEntries;
-						collection.push({ request, entryName, kind });
-					}
-				}
-				return end;
-			},
-			openTag: (input, start, end, nameStart, nameEnd) => {
-				const ignore = pendingWebpackIgnore === true;
-				pendingWebpackIgnore = undefined;
-				if (ignore) {
-					// For `<script>` and `<style>` we don't emit a dependency,
-					// but we must NOT advance past the close tag either: the
-					// walker is already in script-data/rawtext state for
-					// those tags and will consume the body and emit the
-					// matching `closeTag` itself. Returning a position past
-					// `</script>`/`</style>` would leave the walker stuck in
-					// rawtext mode, swallowing later markup.
-					pendingAttributes.length = 0;
-					return end;
-				}
-				const elementName = input.slice(nameStart, nameEnd).toLowerCase();
-
-				// `<style>` is rawtext: capture the inline CSS and hand it to
-				// the CSS pipeline as a virtual `data:text/css` module with
-				// `exportType: "text"`. We use the regex only to discover the
-				// `</style>` position so we can slice the body; the walker is
-				// already in rawtext state for `<style>` and will emit the
-				// matching `closeTag` event itself, so we must return `end`
-				// (the position right after the opening tag's `>`) rather
-				// than advancing past `</style>`. Only `<style>` tags whose
-				// `type` attribute is absent, empty, or `text/css` are
-				// processed; other types are left untouched.
-				if (elementName === "style") {
-					/** @type {string | undefined} */
-					let typeValue;
-					for (const attr of pendingAttributes) {
-						const attrName = input
-							.slice(attr.nameStart, attr.nameEnd)
-							.toLowerCase();
-						if (attrName === "type") {
-							typeValue =
-								attr.valueStart !== -1
-									? input.slice(attr.valueStart, attr.valueEnd)
-									: "";
-							break;
-						}
-					}
-					pendingAttributes.length = 0;
-
-					STYLE_END_REGEXP.lastIndex = end;
-					const closeMatch = STYLE_END_REGEXP.exec(input);
-					if (!closeMatch) return end;
-					const contentStart = end;
-					const contentEnd = closeMatch.index;
-
-					const trimmedType =
-						typeValue !== undefined ? typeValue.trim().toLowerCase() : "";
+		// The walker descends into children (and `<template>` content) itself;
+		// the Element `exit` clears a pending `webpackIgnore` once an element's
+		// children are done (the old `walkChildren` behaviour).
+		new SourceProcessor()
+			.use({
+				[NodeType.Comment]: (n) => {
+					const node = /** @type {import("./syntax").HtmlComment} */ (n);
+					// Only proper `<!-- ... -->` comments carry magic comments.
 					if (
-						typeValue !== undefined &&
-						trimmedType !== "" &&
-						trimmedType !== "text/css"
+						node.end - node.start < 7 ||
+						source.charCodeAt(node.start) !== 0x3c ||
+						source.charCodeAt(node.start + 1) !== 0x21 ||
+						source.charCodeAt(node.start + 2) !== 0x2d ||
+						source.charCodeAt(node.start + 3) !== 0x2d ||
+						source.charCodeAt(node.end - 1) !== 0x3e ||
+						source.charCodeAt(node.end - 2) !== 0x2d ||
+						source.charCodeAt(node.end - 3) !== 0x2d
 					) {
-						return end;
-					}
-
-					// Inline-style processing requires the CSS pipeline; when
-					// `experiments.css` is off, leave the body alone — the
-					// walker is in rawtext mode for `<style>` and will skip
-					// over the body to the matching `</style>` itself.
-					if (!this.css) {
-						return end;
-					}
-
-					const cssContent = input.slice(contentStart, contentEnd);
-					if (cssContent.trim() === "") {
-						return end;
-					}
-
-					// URL-encode the CSS body so the data URI parser's `(.*)$`
-					// body group matches even when the source has newlines or
-					// other characters that would otherwise break the regex.
-					const request = `data:text/css,${encodeURIComponent(cssContent)}`;
-
-					const { line: sl, column: sc } = locConverter.get(contentStart);
-					const { line: el, column: ec } = locConverter.get(contentEnd);
-					const dep = new HtmlInlineStyleDependency(request, [
-						contentStart,
-						contentEnd
-					]);
-					dep.setLoc(sl, sc, el, ec);
-					module.addDependency(dep);
-					module.addCodeGenerationDependency(dep);
-					return end;
-				}
-
-				const sources = DEFAULT_SOURCES.get(elementName);
-
-				if (!sources) {
-					pendingAttributes.length = 0;
-					return end;
-				}
-
-				/** @type {Map<string, string> | undefined} */
-				let attributesMap;
-				const getAttributesMap = () => {
-					if (attributesMap) return attributesMap;
-					attributesMap = new Map();
-					for (const attr of pendingAttributes) {
-						const name = input
-							.slice(attr.nameStart, attr.nameEnd)
-							.toLowerCase();
-						const value =
-							attr.valueStart !== -1
-								? input.slice(attr.valueStart, attr.valueEnd)
-								: "";
-						attributesMap.set(name, value);
+						pendingWebpackIgnore = undefined;
+						return;
 					}
-					return attributesMap;
-				};
-
-				for (const attr of pendingAttributes) {
-					const attributeName = input
-						.slice(attr.nameStart, attr.nameEnd)
-						.toLowerCase();
-					const sourceItem = sources.get(attributeName);
-
-					if (!sourceItem) continue;
-
-					// TODO(html-entities): We should ideally decode entities here using
-					// `walkHtmlTokens.decodeHtmlEntities(input.slice(...))` so that URLs
-					// like `image.png?a=1&amp;b=2` are correctly resolved as `&`.
-					// However, doing so currently breaks `srcset` parsing tests (e.g. `errors.js`)
-					// which explicitly expect whitespace entities like `&#x9;` to NOT be decoded
-					// before the srcset parser runs. A follow-up PR should implement selective
-					// decoding for specific URL attributes.
-					const attributeValue =
-						attr.valueStart !== -1
-							? input.slice(attr.valueStart, attr.valueEnd)
-							: "";
-
-					if (!attributeValue) continue;
-
-					if (
-						typeof sourceItem.filter === "function" &&
-						!sourceItem.filter(getAttributesMap())
-					) {
-						continue;
+					const value = node.data;
+					if (!webpackCommentRegExp.test(value)) {
+						pendingWebpackIgnore = undefined;
+						return;
 					}
-
-					/** @type {ParsedSource[] | undefined} */
-					let parsedAttributeValue;
-
+					/** @type {Record<string, EXPECTED_ANY>} */
+					let options;
 					try {
-						parsedAttributeValue = sourceItem.parse(attributeValue);
+						options = parseMagicComment(value, magicCommentContext);
 					} catch (err) {
-						const { line: sl, column: sc } = locConverter.get(attr.valueStart);
-						const { line: el, column: ec } = locConverter.get(attr.valueEnd);
-
-						module.addError(
-							new ModuleDependencyError(
-								module,
-								new WebpackError(
-									`Bad value for attribute "${attributeName}" on element "${elementName}": ${
-										/** @type {Error} */ (err).message
-									}`
-								),
+						const { line: sl, column: sc } = locConverter.get(node.start);
+						const { line: el, column: ec } = locConverter.get(node.end);
+						module.addWarning(
+							new CommentCompilationWarning(
+								`Compilation error while processing magic comment(-s): /*${value}*/: ${
+									/** @type {Error} */ (err).message
+								}`,
+								{
+									start: { line: sl, column: sc },
+									end: { line: el, column: ec }
+								}
+							)
+						);
+						pendingWebpackIgnore = undefined;
+						return;
+					}
+					if (options.webpackIgnore === undefined) {
+						pendingWebpackIgnore = undefined;
+						return;
+					}
+					if (typeof options.webpackIgnore !== "boolean") {
+						const { line: sl, column: sc } = locConverter.get(node.start);
+						const { line: el, column: ec } = locConverter.get(node.end);
+						module.addWarning(
+							new UnsupportedFeatureWarning(
+								`\`webpackIgnore\` expected a boolean, but received: ${options.webpackIgnore}.`,
 								{
 									start: { line: sl, column: sc },
 									end: { line: el, column: ec }
 								}
 							)
 						);
+						pendingWebpackIgnore = undefined;
+						return;
 					}
+					pendingWebpackIgnore = options.webpackIgnore;
+				},
+				[NodeType.Doctype]: () => {
+					pendingWebpackIgnore = undefined;
+				},
+				[NodeType.Element]: {
+					// Children (and `<template>` content) are walked by the
+					// processor after `enter`; `exit` clears a pending
+					// `webpackIgnore` once they're done.
+					enter: (n) => {
+						const node = /** @type {import("./syntax").HtmlElement} */ (n);
+						const ignore = pendingWebpackIgnore === true;
+						pendingWebpackIgnore = undefined;
+
+						if (ignore) {
+							return;
+						}
 
-					if (!parsedAttributeValue) continue;
-
-					// `<link rel="stylesheet">` is upgraded to an entry only when
-					// `experiments.css` is on — that's the mode where webpack can
-					// bundle the CSS into its own chunk. Without it, the
-					// stylesheet href stays a plain asset URL. Scope this to the
-					// `href` attribute only: `<link>` also exposes
-					// `imagesrcset` URLs which must continue to flow through
-					// the regular asset rewriting path even on a stylesheet
-					// link.
-					const isStylesheetEntry =
-						this.css &&
-						elementName === "link" &&
-						attributeName === "href" &&
-						isLinkStylesheet(getAttributesMap());
-					const isEntry =
-						isStylesheetEntry ||
-						sourceItem.entry === true ||
-						(typeof sourceItem.entry === "function" &&
-							sourceItem.entry(getAttributesMap()));
-
-					// `<script type="module" src>` and `<link rel="modulepreload">`
-					// reference ES modules; everything else under `<script src>` is a
-					// classic script. The category drives ESM vs CommonJS resolution
-					// of the entry — the chunk format is controlled by the user via
-					// `output.module` / `experiments.outputModule`.
-					const useEsmEntry =
-						(elementName === "script" && isModuleScript(getAttributesMap())) ||
-						sourceItem.entryCategory === "esm";
-
-					for (const parsedSource of parsedAttributeValue) {
-						const [value, innerStart, innerEnd] = parsedSource;
-						if (value.startsWith("#")) continue;
-						const sourceStart = attr.valueStart + innerStart;
-						const sourceEnd = attr.valueStart + innerEnd;
-						const { line: sl, column: sc } = locConverter.get(sourceStart);
-						const { line: el, column: ec } = locConverter.get(sourceEnd);
-						if (isEntry) {
-							const entryName = `__html_${moduleHash}_${nextEntryIndex++}`;
-							const isStylesheetLink =
-								elementName === "link" && isLinkStylesheet(getAttributesMap());
-							/** @type {"classic" | "esm-script" | "modulepreload" | "stylesheet"} */
-							const kind =
-								elementName === "link"
-									? isStylesheetLink
-										? "stylesheet"
-										: "modulepreload"
-									: useEsmEntry
-										? "esm-script"
-										: "classic";
-							// With `output.module` enabled, a classic `<script src>` is
-							// upgraded in place to `<script type="module" src>` (see the
-							// ConstDependency insertion below). Account for that in the
-							// dependency's `elementKind` so sibling tags emitted by the
-							// template for additional entry chunks (runtime / split chunks)
-							// also use `type="module"`.
-							const willBeModuleScript =
-								kind === "esm-script" ||
-								(this.outputModule &&
-									kind === "classic" &&
-									elementName === "script");
-							/** @type {"script-classic" | "script-module" | "modulepreload" | "stylesheet"} */
-							const elementKind =
-								kind === "modulepreload"
-									? "modulepreload"
-									: kind === "stylesheet"
-										? "stylesheet"
-										: willBeModuleScript
-											? "script-module"
-											: "script-classic";
-							const dep = new HtmlScriptSrcDependency(
-								value,
-								[sourceStart, sourceEnd],
-								entryName,
-								// `<link rel="stylesheet">` is bundled as a CSS entry —
-								// using a non-"url" category so the default `.css` rule
-								// (which gives the resolved module the CSS module type)
-								// wins over the `dependency: "url"` → asset rule.
-								kind === "stylesheet"
-									? "css-import"
-									: useEsmEntry
-										? "esm"
-										: sourceItem.entryCategory,
-								elementKind,
-								start,
-								end
-							);
-							dep.setLoc(sl, sc, el, ec);
-							module.addPresentationalDependency(dep);
-							// Reconcile the rewritten `<script>` tag's `type`
-							// attribute with the chunk's actual format. See
-							// `reconcileScriptTypeAttr` for the rules.
-							if (
-								elementName === "script" &&
-								(kind === "classic" || kind === "esm-script")
-							) {
-								/** @type {AttrToken | undefined} */
-								let typeAttr;
-								for (const a of pendingAttributes) {
+						const elementName = node.tagName;
+						const attrs = node.attributes;
+
+						/** @type {Map<string, string> | undefined} */
+						let attributesMap;
+						const getAttributesMap = () => {
+							if (attributesMap) return attributesMap;
+							attributesMap = new Map();
+							for (const attr of attrs) {
+								// Decoded values — filters and type resolvers compare what
+								// the browser sees (e.g. `rel="&#105;con"` means `icon`)
+								attributesMap.set(
+									attr.name,
+									decodeHtmlEntities(attr.value, true)
+								);
+							}
+							return attributesMap;
+						};
+
+						// Each matched attribute is a source; the element body (inline
+						// `<style>`/`<script>`) is one more — content rather than an attribute.
+						// All are dispatched by the same `switch (type)`.
+						const sources =
+							this.sourcesByTag[elementName] || this.sourcesByTag[ANY_TAG];
+						const bodyItem = CONTENT_SOURCES[elementName];
+						// Iterate the attributes, then one extra step for the element
+						// body (`i === attrs.length`); `attrs[i]` is only read on the
+						// attribute steps, so the access stays in bounds.
+						for (let i = 0; i < attrs.length + 1; i++) {
+							const content = i === attrs.length;
+							/** @type {SourceType} */
+							let type;
+							/** @type {string} */
+							let value;
+							/** @type {number} */
+							let start;
+							/** @type {number} */
+							let end;
+							/** @type {import("./syntax").HtmlAttribute | undefined} */
+							let attr;
+							if (content) {
+								if (!bodyItem) continue;
+								if (bodyItem.filter && !bodyItem.filter(getAttributesMap())) {
+									continue;
+								}
+								/** @type {number | undefined} */
+								let bodyStart;
+								let bodyEnd = node.tagEnd;
+								for (const child of node.children) {
+									if (child.type === NodeType.Text) {
+										if (bodyStart === undefined) bodyStart = child.start;
+										bodyEnd = child.end;
+									}
+								}
+								if (bodyStart === undefined) continue;
+								value = source.slice(bodyStart, bodyEnd);
+								if (value.trim() === "") continue;
+								start = bodyStart;
+								end = bodyEnd;
+								type =
+									typeof bodyItem.type === "function"
+										? bodyItem.type(getAttributesMap(), css)
+										: bodyItem.type;
+							} else {
+								attr = attrs[i];
+								const item = sources[attr.name];
+								if (!item) continue;
+								if (
+									item.namespace !== undefined &&
+									node.namespace !== item.namespace
+								) {
+									continue;
+								}
+								// Adoption-agency clones carry no offsets; skip blank values.
+								if (attr.valueStart === undefined || attr.valueStart === -1) {
+									continue;
+								}
+								value = attr.value;
+								if (!value || !/\S/.test(value)) continue;
+								const filter = item.filter;
+								if (filter) {
+									// The filter also sees the decoded value (the browser tokenizes it
+									// decoded, e.g. `&#117;rl(`), so a value-only check needn't re-read it.
+									const decoded = value.includes("&")
+										? decodeHtmlEntities(value, true)
+										: value;
+									if (!filter(getAttributesMap(), decoded)) continue;
+								}
+								start = attr.valueStart;
+								end = attr.valueEnd;
+								type =
+									typeof item.type === "function"
+										? item.type(getAttributesMap(), css)
+										: item.type;
+							}
+							// A resolved `type` selects the parse algorithm and the dependency
+							// kind — the only dispatch in the parser.
+							switch (type) {
+								// Inline CSS — a `<style>` body (raw, a full stylesheet) or an
+								// attribute value (decoded, re-escaped on write-back; `*-attribute`
+								// is a declaration list). Needs `experiments.css`.
+								case "stylesheet-style":
+								case "stylesheet-style-attribute": {
+									if (!css) break;
+									const cssText = content
+										? value
+										: decodeHtmlEntities(value, true);
+									if (cssText.trim() === "") break;
+									const dep = new HtmlInlineStyleDependency(
+										dataUri("text/css", cssText),
+										[start, end],
+										content ? false : type === "stylesheet-style-attribute",
+										!content
+									);
+									setLoc(dep, start, end);
+									module.addDependency(dep);
+									module.addCodeGenerationDependency(dep);
+									break;
+								}
+								// `<iframe srcdoc>`: an entity-encoded HTML document. Feed the
+								// decoded markup back through the HTML pipeline as a nested
+								// `data:text/html` module. Per spec the value is a full document
+								// whose URL is `about:srcdoc`, so its base URL is inherited from
+								// this document — asset URLs resolve against this file's context.
+								case "srcdoc": {
+									const htmlText = decodeHtmlEntities(value, true);
+									// Only spin up a nested module when there is markup that can
+									// reference an asset; text/formatting-only markup is identical
+									// after rewriting (see `SRCDOC_ASSET_REGEXP`).
 									if (
-										input.slice(a.nameStart, a.nameEnd).toLowerCase() === "type"
+										!htmlText.includes("<") ||
+										!SRCDOC_ASSET_REGEXP.test(htmlText)
 									) {
-										typeAttr = a;
 										break;
 									}
+									const dep = new HtmlInlineHtmlDependency(
+										dataUri("text/html", htmlText),
+										[start, end]
+									);
+									setLoc(dep, start, end);
+									module.addDependency(dep);
+									module.addCodeGenerationDependency(dep);
+									break;
+								}
+								// Inline `<script>` body — bundled as its own entry chunk.
+								case "script":
+								case "script-module":
+									if (content) {
+										const scriptType =
+											/** @type {"script" | "script-module"} */ (type);
+										const request = dataUri("text/javascript", value);
+										const entryName = `__html_${moduleHash}_${nextEntryIndex++}`;
+										const dep = new HtmlInlineScriptDependency(
+											request,
+											node.nameEnd,
+											[start, end],
+											entryName,
+											scriptType === "script-module" ? "esm" : "commonjs"
+										);
+										setLoc(dep, start, end);
+										module.addPresentationalDependency(dep);
+										reconcileScriptTypeAttr(
+											findAttr(attrs, "type"),
+											node.nameEnd,
+											scriptType,
+											source
+										);
+										(scriptType === "script"
+											? scriptEntries
+											: scriptModuleEntries
+										).push({
+											request,
+											entryName,
+											type: scriptType
+										});
+										break;
+									}
+								// falls through — external `<script src>` joins the URL-bearing types
+								case "src":
+								case "srcset":
+								case "css-url":
+								case "msapplication-task":
+								case "modulepreload":
+								case "stylesheet": {
+									// Parse the value into one or more URLs (decoding character
+									// references, mapping spans back to raw offsets), then emit a plain
+									// asset reference or an entry chunk per URL.
+									const a = /** @type {import("./syntax").HtmlAttribute} */ (
+										attr
+									);
+									const parse =
+										type === "srcset"
+											? parseSrcset
+											: type === "css-url"
+												? parseCssUrls
+												: type === "msapplication-task"
+													? parseMsapplicationTask
+													: parseSrc;
+									let text = value;
+									/** @type {number[] | undefined} */
+									let map;
+									if (value.includes("&")) {
+										({ text, map } = decodeHtmlEntitiesWithMap(value, true));
+										if (!/\S/.test(text)) break;
+									}
+									/** @type {ParsedSource[] | undefined} */
+									let parsed;
+									try {
+										parsed = parse(text);
+									} catch (err) {
+										const ds = locConverter.get(start);
+										const de = locConverter.get(end);
+										module.addError(
+											new ModuleDependencyError(
+												module,
+												new WebpackError(
+													`Bad value for attribute "${
+														a.name
+													}" on element "${elementName}": ${
+														/** @type {Error} */ (err).message
+													}`
+												),
+												{
+													start: { line: ds.line, column: ds.column },
+													end: { line: de.line, column: de.column }
+												}
+											)
+										);
+										break;
+									}
+									if (!parsed) break;
+									for (const [url, us, ue] of parsed) {
+										// Internal `url(#id)` / fragment-only refs aren't assets.
+										if (!url || url.startsWith("#")) continue;
+										const s = start + (map ? map[us] : us);
+										const e = start + (map ? map[ue] : ue);
+										// `src`/`srcset`/`css-url`/`msapplication-task` are plain assets;
+										// the rest are narrowed to entry types here and share one
+										// `HtmlEntryDependency`, recorded for HtmlModulesPlugin.
+										if (
+											type === "script" ||
+											type === "script-module" ||
+											type === "modulepreload" ||
+											type === "stylesheet"
+										) {
+											const entryName = `__html_${moduleHash}_${nextEntryIndex++}`;
+											const willBeModuleScript =
+												type === "script-module" ||
+												(outputModule && type === "script");
+											/** @type {EntrySourceType} */
+											const elementKind =
+												type === "modulepreload"
+													? "modulepreload"
+													: type === "stylesheet"
+														? "stylesheet"
+														: willBeModuleScript
+															? "script-module"
+															: "script";
+											const entryCategory =
+												type === "stylesheet"
+													? "css-import"
+													: type === "script-module" || type === "modulepreload"
+														? "esm"
+														: undefined;
+											// Native = the loading element is the tag the template clones
+											// verbatim (`<script>` / `<link>`); a custom element is not.
+											const nativeTag =
+												elementKind === "stylesheet" ||
+												elementKind === "modulepreload"
+													? "link"
+													: "script";
+											// CSP/fetch attributes the template copies onto siblings.
+											let copyableAttrsText = "";
+											let hasOwnCrossOrigin = false;
+											if (node.start >= 0) {
+												for (const copyableName of COPYABLE_SIBLING_ATTRS) {
+													const copyableAttr = findAttr(attrs, copyableName);
+													if (copyableAttr) {
+														copyableAttrsText += attrSourceSpan(
+															source,
+															copyableAttr
+														);
+														if (copyableName === "crossorigin") {
+															hasOwnCrossOrigin = true;
+														}
+													}
+												}
+											}
+											if (
+												firstScriptStart === -1 &&
+												(type === "script" || type === "script-module")
+											) {
+												firstScriptStart = node.start;
+											}
+											// Sibling-clone attribute edits, captured from the parsed
+											// attributes (offsets relative to the tag) so the template
+											// needn't re-parse the tag text: `integrity` is dropped
+											// (content-specific) and `script-module` clones are forced
+											// to `type="module"` (its value range, else inserted).
+											/** @type {Range | null} */
+											let integrityRange = null;
+											/** @type {Range | null} */
+											let typeValueRange = null;
+											if (node.start >= 0 && elementName === nativeTag) {
+												const integrityAttr = findAttr(attrs, "integrity");
+												if (integrityAttr && integrityAttr.nameStart >= 0) {
+													let rs = integrityAttr.nameStart;
+													while (
+														rs > 0 &&
+														isASCIIWhitespace(source.charCodeAt(rs - 1))
+													) {
+														rs--;
+													}
+													let re;
+													if (integrityAttr.valueStart === -1) {
+														re = integrityAttr.nameEnd;
+													} else {
+														const q = source.charCodeAt(
+															integrityAttr.valueStart - 1
+														);
+														re =
+															q === CC_QUOTATION || q === CC_APOSTROPHE
+																? integrityAttr.valueEnd + 1
+																: integrityAttr.valueEnd;
+													}
+													integrityRange = [rs - node.start, re - node.start];
+												}
+												if (elementKind === "script-module") {
+													const typeAttr = findAttr(attrs, "type");
+													if (typeAttr && typeAttr.valueStart >= 0) {
+														typeValueRange = [
+															typeAttr.valueStart - node.start,
+															typeAttr.valueEnd - node.start
+														];
+													}
+												}
+											}
+											const dep = new HtmlEntryDependency(
+												url,
+												[s, e],
+												entryName,
+												entryCategory,
+												elementKind,
+												node.start,
+												node.tagEnd,
+												elementName === nativeTag,
+												copyableAttrsText,
+												node.nameEnd,
+												hasOwnCrossOrigin,
+												firstScriptStart,
+												integrityRange,
+												typeValueRange
+											);
+											setLoc(dep, s, e);
+											module.addPresentationalDependency(dep);
+											if (
+												elementName === "script" &&
+												(type === "script" || type === "script-module")
+											) {
+												reconcileScriptTypeAttr(
+													findAttr(attrs, "type"),
+													node.nameEnd,
+													type,
+													source
+												);
+											}
+											(type === "script"
+												? scriptEntries
+												: type === "script-module"
+													? scriptModuleEntries
+													: type === "stylesheet"
+														? stylesheetEntries
+														: modulePreloadEntries
+											).push({ request: url, entryName, type });
+										} else {
+											const dep = new HtmlSourceDependency(url, [s, e]);
+											setLoc(dep, s, e);
+											module.addDependency(dep);
+											module.addCodeGenerationDependency(dep);
+										}
+									}
+									break;
 								}
-								reconcileScriptTypeAttr(typeAttr, nameEnd, kind, input);
 							}
-							const collection =
-								kind === "classic"
-									? classicEntries
-									: kind === "esm-script"
-										? esmScriptEntries
-										: kind === "stylesheet"
-											? stylesheetEntries
-											: modulePreloadEntries;
-							collection.push({ request: value, entryName, kind });
-						} else {
-							const dep = new HtmlSourceDependency(value, [
-								sourceStart,
-								sourceEnd
-							]);
-							dep.setLoc(sl, sc, el, ec);
-							module.addDependency(dep);
-							module.addCodeGenerationDependency(dep);
 						}
+					},
+					exit: () => {
+						pendingWebpackIgnore = undefined;
 					}
 				}
+			})
+			.process(source, { ast: buildHtmlAst(source) });
 
-				// `<script>` is rawtext (the "script data state" in the HTML
-				// tokenizer): its body must never be reparsed as HTML,
-				// regardless of whether the tag has a `src` attribute. The
-				// walker is already in script-data state for `<script>` and
-				// will emit the matching `closeTag` event itself, so we
-				// return `end` and defer body extraction to the closeTag
-				// callback (which gets the spec-correct `</script>` position
-				// even in escaped/double-escaped script-data sub-states).
-				// When the tag has no `src` and its body is non-empty, the
-				// closeTag handler bundles the inline JS as its own entry —
-				// the same pipeline that processes `<script src>` — by
-				// issuing a `data:text/javascript;base64,...` virtual request
-				// and adding a dependency that rewrites the tag to
-				// `<script src="…">` at render time. Only `<script>` tags
-				// whose `type` attribute is absent, empty, or a recognized
-				// JS mimetype are processed as JS; other types (e.g.
-				// `application/ld+json`, `importmap`) are left untouched.
-				if (elementName === "script") {
-					const attrs = getAttributesMap();
-					// Use attribute presence, not value: a `<script src>` with
-					// an empty or valueless `src` still ignores its inline
-					// body in the browser, so we must not bundle the body.
-					const hasSrc = attrs.has("src");
-
-					/** @type {AttrToken | undefined} */
-					let typeAttr;
-					for (const a of pendingAttributes) {
-						if (input.slice(a.nameStart, a.nameEnd).toLowerCase() === "type") {
-							typeAttr = a;
-							break;
-						}
-					}
-					pendingAttributes.length = 0;
-
-					if (hasSrc || !isExecutableJsScript(attrs)) {
-						// `<script src>` body is ignored by the browser, and
-						// non-JS `<script type>` (e.g. importmap, JSON-LD)
-						// passes through unchanged. Either way the walker
-						// consumes the body and emits the close tag itself.
-						return end;
-					}
-
-					pendingInlineScript = {
-						contentStart: end,
-						attrs,
-						typeAttr,
-						nameEnd
-					};
-					return end;
-				}
-
-				pendingAttributes.length = 0;
-				return end;
-			}
-		});
-
-		const buildInfo = /** @type {BuildInfo} */ (module.buildInfo);
+		const buildInfo = /** @type {HtmlModuleBuildInfo} */ (module.buildInfo);
 		buildInfo.strict = true;
 		// Hand off the collected entries to HtmlModulesPlugin; it creates the
-		// real compilation entries during the finishMake hook. The classic
-		// and esm-script groups are chained via a leader-only dependOn so
-		// they share a runtime; modulepreload entries are emitted as
-		// independent entries since `<link rel=modulepreload>` must preload
-		// without running.
+		// real compilation entries during the finishMake hook. The `script`
+		// and `script-module` groups are chained via a leader-only dependOn
+		// so they share a runtime; `modulepreload` and `stylesheet` entries
+		// are emitted as independent entries since `<link rel=modulepreload>`
+		// must preload without running and stylesheets have no runtime.
 		if (
-			classicEntries.length > 0 ||
-			esmScriptEntries.length > 0 ||
+			scriptEntries.length > 0 ||
+			scriptModuleEntries.length > 0 ||
 			modulePreloadEntries.length > 0 ||
 			stylesheetEntries.length > 0
 		) {
-			/** @type {Record<string, EntryScriptInfo[]>} */
-			(buildInfo.htmlEntryScripts) = {
-				classic: classicEntries,
-				"esm-script": esmScriptEntries,
+			buildInfo.htmlEntryScripts = {
+				script: scriptEntries,
+				"script-module": scriptModuleEntries,
 				modulepreload: modulePreloadEntries,
 				stylesheet: stylesheetEntries
 			};