From 5b736069f51ffb593c12b0e6a62d0ad1e87e7473 Mon Sep 17 00:00:00 2001
From: Joe Schafer <joe.schafer@arryved.com>
Date: Wed, 21 May 2025 17:32:47 -0700
Subject: [PATCH 1/2] fix: allow attributes on the title element

The spec states the title element supports global attributes.
https://html.spec.whatwg.org/#the-title-element

Reverts the title attribute validation introduced in #1721.

Fixes #5198.
---
 .changeset/selfish-wasps-agree.md                  |  5 +++++
 .../docs/98-reference/.generated/compile-errors.md |  6 ------
 .../svelte/messages/compile-errors/template.md     |  4 ----
 packages/svelte/src/compiler/errors.js             | 11 +----------
 .../phases/2-analyze/visitors/TitleElement.js      |  4 ----
 .../samples/title-no-attributes/errors.json        | 14 --------------
 6 files changed, 6 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/selfish-wasps-agree.md
 delete mode 100644 packages/svelte/tests/validator/samples/title-no-attributes/errors.json

diff --git a/.changeset/selfish-wasps-agree.md b/.changeset/selfish-wasps-agree.md
new file mode 100644
index 000000000000..3238e5c1e17e
--- /dev/null
+++ b/.changeset/selfish-wasps-agree.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+Allow attributes on the title element.
diff --git a/documentation/docs/98-reference/.generated/compile-errors.md b/documentation/docs/98-reference/.generated/compile-errors.md
index db848a0299ee..76ad8de7fb53 100644
--- a/documentation/docs/98-reference/.generated/compile-errors.md
+++ b/documentation/docs/98-reference/.generated/compile-errors.md
@@ -1082,12 +1082,6 @@ Expected a valid element or component name. Components must have a valid variabl
 A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
 ```
 
-### title_illegal_attribute
-
-```
-`<title>` cannot have attributes nor directives
-```
-
 ### title_invalid_content
 
 ```
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 0569f63ad30d..8c24e4954553 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -398,10 +398,6 @@ See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-ele
 
 > A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
 
-## title_illegal_attribute
-
-> `<title>` cannot have attributes nor directives
-
 ## title_invalid_content
 
 > `<title>` can only contain text and {tags}
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 25e72340c64d..bdcf30a6feb0 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -1573,15 +1573,6 @@ export function textarea_invalid_content(node) {
 	e(node, 'textarea_invalid_content', `A \`<textarea>\` can have either a value attribute or (equivalently) child content, but not both\nhttps://svelte.dev/e/textarea_invalid_content`);
 }
 
-/**
- * `<title>` cannot have attributes nor directives
- * @param {null | number | NodeLike} node
- * @returns {never}
- */
-export function title_illegal_attribute(node) {
-	e(node, 'title_illegal_attribute', `\`<title>\` cannot have attributes nor directives\nhttps://svelte.dev/e/title_illegal_attribute`);
-}
-
 /**
  * `<title>` can only contain text and {tags}
  * @param {null | number | NodeLike} node
@@ -1647,4 +1638,4 @@ export function unterminated_string_constant(node) {
  */
 export function void_element_invalid_content(node) {
 	e(node, 'void_element_invalid_content', `Void elements cannot have children or closing tags\nhttps://svelte.dev/e/void_element_invalid_content`);
-}
\ No newline at end of file
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js
index caa3206b0d30..cd1e03ee83dd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js
@@ -7,10 +7,6 @@ import * as e from '../../../errors.js';
  * @param {Context} context
  */
 export function TitleElement(node, context) {
-	for (const attribute of node.attributes) {
-		e.title_illegal_attribute(attribute);
-	}
-
 	for (const child of node.fragment.nodes) {
 		if (child.type !== 'Text' && child.type !== 'ExpressionTag') {
 			e.title_invalid_content(child);
diff --git a/packages/svelte/tests/validator/samples/title-no-attributes/errors.json b/packages/svelte/tests/validator/samples/title-no-attributes/errors.json
deleted file mode 100644
index 76860e576905..000000000000
--- a/packages/svelte/tests/validator/samples/title-no-attributes/errors.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-	{
-		"code": "title_illegal_attribute",
-		"message": "`<title>` cannot have attributes nor directives",
-		"start": {
-			"line": 2,
-			"column": 8
-		},
-		"end": {
-			"line": 2,
-			"column": 25
-		}
-	}
-]

From 874011089b62bf98b91c53430297a0d4d0ccde24 Mon Sep 17 00:00:00 2001
From: Joe Schafer <joe.schafer@arryved.com>
Date: Thu, 22 May 2025 16:04:16 -0700
Subject: [PATCH 2/2] WIP: attempt to add render title attributes

SSR is pretty straight-forward. The client side is more difficult since
the TitleElement doesn't have a node_id.
---
 .../client/visitors/TitleElement.js           | 45 ++++++++++++++++++-
 .../server/visitors/TitleElement.js           |  5 ++-
 .../server/visitors/shared/element.js         | 24 +++++-----
 .../samples/head-title-attributes/_config.js  | 12 +++++
 .../samples/head-title-attributes/main.svelte |  3 ++
 .../head-title-attributes/_expected_head.html |  1 +
 .../samples/head-title-attributes/main.svelte |  3 ++
 .../_expected_head.html                       |  1 +
 .../head-title-spread-attributes/main.svelte  | 11 +++++
 9 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/head-title-attributes/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/head-title-attributes/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-title-attributes/_expected_head.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-title-attributes/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/_expected_head.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/main.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
index 7bfdaf1850d2..23308391db16 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -1,7 +1,12 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '#compiler/builders';
-import { build_template_chunk } from './shared/utils.js';
+import {build_template_chunk, get_expression_id} from './shared/utils.js';
+import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
+import {build_attribute_value} from "./shared/element.js";
+import { visit_event_attribute } from './shared/events.js';
+import {normalize_attribute} from "../../../../../utils.js";
+import {is_ignored} from "../../../../state.js";
 
 /**
  * @param {AST.TitleElement} node
@@ -15,10 +20,46 @@ export function TitleElement(node, context) {
 	);
 
 	const statement = b.stmt(b.assignment('=', b.id('$.document.title'), value));
-
 	if (has_state) {
 		context.state.update.push(statement);
 	} else {
 		context.state.init.push(statement);
 	}
+
+	// TODO: is this the right approach?
+
+	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
+	const attributes = [];
+	for (const attribute of node.attributes) {
+		switch (attribute.type) {
+			case 'Attribute':
+				attributes.push(attribute);
+				break;
+		}
+	}
+
+	const node_id = {"type": "Identifier", "name": "title"}
+
+	for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
+		if (is_event_attribute(attribute)) {
+			visit_event_attribute(attribute, context);
+			continue;
+		}
+
+		const name = normalize_attribute(attribute.name);
+		const { value, has_state } = build_attribute_value(
+			attribute.value,
+			context,
+			(value, metadata) => (metadata.has_call ? get_expression_id(context.state, value) : value)
+		);
+
+		const update = b.call(
+			'$.set_attribute',
+			false,
+			b.literal(name),
+			value,
+			is_ignored(node, 'hydration_attribute_changed') && b.true
+		);
+		(has_state ? context.state.update : context.state.init).push(b.stmt(update));
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
index c42df4c646c6..c94eee845440 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
@@ -2,6 +2,7 @@
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '#compiler/builders';
 import { process_children, build_template } from './shared/utils.js';
+import { build_element_attributes } from "./shared/element.js";
 
 /**
  * @param {AST.TitleElement} node
@@ -9,7 +10,9 @@ import { process_children, build_template } from './shared/utils.js';
  */
 export function TitleElement(node, context) {
 	// title is guaranteed to contain only text/expression tag children
-	const template = [b.literal('<title>')];
+	const template = [b.literal('<title')];
+	build_element_attributes(node, { ...context, state: { ...context.state, template } });
+	template.push(b.literal('>'));
 	process_children(node.fragment.nodes, { ...context, state: { ...context.state, template } });
 	template.push(b.literal('</title>'));
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index b0bcb8fd6fbb..50ad3db2ab9d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -25,9 +25,9 @@ import { escape_html } from '../../../../../../escaping.js';
 const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
 /**
- * Writes the output to the template output. Some elements may have attributes on them that require the
+ * Writes the output to the template output. Some elements may have attributes on them that require
  * their output to be the child content instead. In this case, an object is returned.
- * @param {AST.RegularElement | AST.SvelteElement} node
+ * @param {AST.RegularElement | AST.SvelteElement | AST.TitleElement} node
  * @param {import('zimmerframe').Context<AST.SvelteNode, ComponentServerTransformState>} context
  */
 export function build_element_attributes(node, context) {
@@ -203,7 +203,7 @@ export function build_element_attributes(node, context) {
 	if (has_spread) {
 		build_element_spread_attributes(node, attributes, style_directives, class_directives, context);
 	} else {
-		const css_hash = node.metadata.scoped ? context.state.analysis.css.hash : null;
+		const css_hash = node.type !== 'TitleElement' && node.metadata.scoped ? context.state.analysis.css.hash : null;
 
 		for (const attribute of /** @type {AST.Attribute[]} */ (attributes)) {
 			const name = get_attribute_name(node, attribute);
@@ -273,12 +273,12 @@ export function build_element_attributes(node, context) {
 }
 
 /**
- * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {AST.RegularElement | AST.SvelteElement | AST.TitleElement} element
  * @param {AST.Attribute} attribute
  */
 function get_attribute_name(element, attribute) {
 	let name = attribute.name;
-	if (!element.metadata.svg && !element.metadata.mathml) {
+	if (element.type !== 'TitleElement' && !element.metadata.svg && !element.metadata.mathml) {
 		name = name.toLowerCase();
 		// don't lookup boolean aliases here, the server runtime function does only
 		// check for the lowercase variants of boolean attributes
@@ -288,7 +288,7 @@ function get_attribute_name(element, attribute) {
 
 /**
  *
- * @param {AST.RegularElement | AST.SvelteElement} element
+ * @param {AST.RegularElement | AST.SvelteElement | AST.TitleElement} element
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
  * @param {AST.StyleDirective[]} style_directives
  * @param {AST.ClassDirective[]} class_directives
@@ -330,10 +330,12 @@ function build_element_spread_attributes(
 		styles = b.object(properties);
 	}
 
-	if (element.metadata.svg || element.metadata.mathml) {
-		flags |= ELEMENT_IS_NAMESPACED | ELEMENT_PRESERVE_ATTRIBUTE_CASE;
-	} else if (is_custom_element_node(element)) {
-		flags |= ELEMENT_PRESERVE_ATTRIBUTE_CASE;
+	if (element.type !== 'TitleElement') {
+		if (element.metadata.svg || element.metadata.mathml) {
+			flags |= ELEMENT_IS_NAMESPACED | ELEMENT_PRESERVE_ATTRIBUTE_CASE;
+		} else if (is_custom_element_node(element)) {
+			flags |= ELEMENT_PRESERVE_ATTRIBUTE_CASE;
+		}
 	}
 
 	const object = b.object(
@@ -353,7 +355,7 @@ function build_element_spread_attributes(
 	);
 
 	const css_hash =
-		element.metadata.scoped && context.state.analysis.css.hash
+		element.type !== 'TitleElement' && element.metadata.scoped && context.state.analysis.css.hash
 			? b.literal(context.state.analysis.css.hash)
 			: b.null;
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/head-title-attributes/_config.js b/packages/svelte/tests/runtime-legacy/samples/head-title-attributes/_config.js
new file mode 100644
index 000000000000..4f8ee14ba076
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/head-title-attributes/_config.js
@@ -0,0 +1,12 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, component, window }) {
+		assert.equal(window.document.title, 'Foo');
+
+		const elems = window.document.getElementsByTagName('title');
+		assert.equal(elems.length, 1);
+		const attrValue = elems[0].getAttribute('aria-live');
+		assert.equal(attrValue, 'assertive');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/head-title-attributes/main.svelte b/packages/svelte/tests/runtime-legacy/samples/head-title-attributes/main.svelte
new file mode 100644
index 000000000000..a02079597ad0
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/head-title-attributes/main.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+  <title aria-live="assertive">Foo</title>
+</svelte:head>
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-title-attributes/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/head-title-attributes/_expected_head.html
new file mode 100644
index 000000000000..ad1751f8e652
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-title-attributes/_expected_head.html
@@ -0,0 +1 @@
+<title aria-live="assertive">Foo</title>
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-title-attributes/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-title-attributes/main.svelte
new file mode 100644
index 000000000000..a02079597ad0
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-title-attributes/main.svelte
@@ -0,0 +1,3 @@
+<svelte:head>
+  <title aria-live="assertive">Foo</title>
+</svelte:head>
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/_expected_head.html
new file mode 100644
index 000000000000..eada47b7a0fc
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/_expected_head.html
@@ -0,0 +1 @@
+<title value="bar" form="qux" list="quu">Foo</title>
diff --git a/packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/main.svelte b/packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/main.svelte
new file mode 100644
index 000000000000..671b7ec897bc
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/head-title-spread-attributes/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let props = {
+		value: 'bar',
+		form: 'qux',
+		list: 'quu',
+	};
+</script>
+
+<svelte:head>
+  <title {...props}>Foo</title>
+</svelte:head>