From 07bdf28d7f3224c8c3094ccfc65f2a6a3bec62d4 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 13:46:53 +0000
Subject: [PATCH 1/4] Update links, images and iframes in place when href or
 src changes

An href or src still pairs elements sharing it first, but no longer stops an
element matching by its tag, so a focused link keeps focus and an iframe or
image is updated rather than replaced. A name, an id and form controls keep
their rules.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LSdDY3ErxNaeULsmoUQS4q
---
 README.md                                   |  2 +-
 src/morphlex.ts                             |  6 +-
 test/new/href-src-in-place.browser.test.ts  | 78 +++++++++++++++++++++
 test/new/sibling-matching.browser.test.ts   |  4 --
 test/new/tagname-exclusions.browser.test.ts | 24 -------
 5 files changed, 83 insertions(+), 31 deletions(-)
 create mode 100644 test/new/href-src-in-place.browser.test.ts

diff --git a/README.md b/README.md
index 96eb719..9fe8f2f 100644
--- a/README.md
+++ b/README.md
@@ -186,7 +186,7 @@ When morphing the children of an element, Morphlex pairs each new child with an
 4. An element that contains one of the same `id`s somewhere inside it.
 5. With `preserveChanges`, a checkbox, radio or option the user changed is paired with one making the same choice, such as the same name and value in the same form, and an element such as a `<label>` holding one is paired with an element holding the same choice. This keeps the user’s pick in place when items are added or reordered around it.
 6. An element with the same non-empty `name`, `href` or `src` attribute.
-7. Any element with the same tag name, as long as neither element has an `id`, a non-empty `name`, `href` or `src`, and neither is a form control. Ids inside the elements don’t count, so a wrapper without its own identity still pairs by position.
+7. Any element with the same tag name, as long as neither element has an `id` or a non-empty `name`, and neither is a form control. Ids inside the elements don’t count, so a wrapper without its own identity still pairs by position, and an `href` or `src` doesn’t either, so a link, image or iframe whose address changes is updated in place.
 
 When a new child’s unique `id` belongs to a live element under another parent that can be morphed into it, the new child isn’t paired here. That element moves to the new child’s place instead (see [Options](#options)).
 
diff --git a/src/morphlex.ts b/src/morphlex.ts
index 7e680d9..c60280c 100644
--- a/src/morphlex.ts
+++ b/src/morphlex.ts
@@ -3901,9 +3901,11 @@ function canMorphElementInPlace(from: Element, to: Element): boolean {
 	return true
 }
 
-// Only an element's own identity counts, so a wrapper holding an id'd element still matches by its tag.
+// Only an element's own identity counts, so a wrapper holding an id'd element still matches by its tag. An `href` or
+// `src` pairs elements sharing it first, but doesn't stop one matching by its tag, so a link or an iframe whose
+// address changes is updated in place.
 function canSoftMatchByTagName(element: Element): boolean {
-	return idOf(element) === "" && !isFormControl(element) && !hasMatchKeyAttribute(element)
+	return idOf(element) === "" && !isFormControl(element) && !getAttribute(element, "name")
 }
 
 // Whether the elements have the same non-empty name, href or src.
diff --git a/test/new/href-src-in-place.browser.test.ts b/test/new/href-src-in-place.browser.test.ts
new file mode 100644
index 0000000..294c70a
--- /dev/null
+++ b/test/new/href-src-in-place.browser.test.ts
@@ -0,0 +1,78 @@
+import { expect, test } from "vitest"
+import { morph } from "../../src/morphlex"
+import { observeMutations } from "./utils"
+
+function morphChildren(fromHTML: string, toHTML: string) {
+	const from = document.createElement("div")
+	from.innerHTML = fromHTML
+	const before = Array.from(from.childNodes)
+	const to = document.createElement("div")
+	to.innerHTML = toHTML
+	const expected = to.innerHTML
+
+	const mutations = observeMutations(from, () => morph(from, to))
+
+	expect(from.innerHTML).toBe(expected)
+	return {
+		original: Array.from(from.childNodes, (node) => before.indexOf(node)),
+		added: mutations.nodesAdded,
+		removed: mutations.nodesRemoved,
+	}
+}
+
+test.each([
+	[`<a href="/old">old</a>`, `<a href="/new">new</a>`],
+	[`<img src="/old.png">`, `<img src="/new.png">`],
+	[`<iframe src="about:blank#old"></iframe>`, `<iframe src="about:blank#new"></iframe>`],
+	[`<a href="/x">old</a>`, `<a href="">new</a>`],
+	[`<a href="/x">old</a>`, `<a>new</a>`],
+	[`<a>old</a>`, `<a href="/x">new</a>`],
+	[`<link rel="stylesheet" href="data:text/css,p{}">`, `<link rel="stylesheet" href="data:text/css,p{ }">`],
+])("an element whose href or src changes is morphed in place: %s to %s", (fromHTML, toHTML) => {
+	expect(morphChildren(fromHTML, toHTML)).toEqual({ original: [0], added: 0, removed: 0 })
+})
+
+test("an element keeps the one sharing its href before others take it by position", () => {
+	expect(morphChildren(`<a href="/a">a</a><a href="/b">b</a>`, `<a href="/b">b</a><a href="/c">c</a>`)).toEqual({
+		original: [1, 0],
+		added: 1,
+		removed: 1,
+	})
+})
+
+test("a focused link keeps focus when its href changes", () => {
+	const from = document.createElement("div")
+	from.innerHTML = `<a href="/old">Link</a>`
+	document.body.append(from)
+	const link = from.firstElementChild as HTMLAnchorElement
+	link.focus()
+
+	const to = document.createElement("div")
+	to.innerHTML = `<a href="/new">Link</a>`
+	morph(from, to)
+
+	expect(from.firstElementChild).toBe(link)
+	expect(link.getAttribute("href")).toBe("/new")
+	expect(document.activeElement).toBe(link)
+	from.remove()
+})
+
+test("an element with a name still isn't matched by tag", () => {
+	expect(morphChildren(`<a name="old">old</a>`, `<a name="new">new</a>`)).toEqual({ original: [-1], added: 1, removed: 1 })
+})
+
+test("an element with a name and an href still isn't matched by tag", () => {
+	expect(morphChildren(`<a name="n" href="/old">old</a>`, `<a name="n2" href="/new">new</a>`)).toEqual({
+		original: [-1],
+		added: 1,
+		removed: 1,
+	})
+})
+
+test("a form control with a changed src is still replaced", () => {
+	expect(morphChildren(`<input type="image" src="/old.png">`, `<input type="image" src="/new.png">`)).toEqual({
+		original: [-1],
+		added: 1,
+		removed: 1,
+	})
+})
diff --git a/test/new/sibling-matching.browser.test.ts b/test/new/sibling-matching.browser.test.ts
index 5af8895..38927c5 100644
--- a/test/new/sibling-matching.browser.test.ts
+++ b/test/new/sibling-matching.browser.test.ts
@@ -100,7 +100,3 @@ test.each([
 ])("an element with an empty name, href or src is morphed in place: %s to %s", (fromHTML, toHTML) => {
 	expect(morphChildren(fromHTML, toHTML)).toMatchObject({ original: [0], added: 0, removed: 0 })
 })
-
-test("an element with a non-empty href isn't paired with one whose href is empty", () => {
-	expect(morphChildren(`<a href="/x">old</a>`, `<a href="">new</a>`)).toMatchObject({ original: [-1], added: 1, removed: 1 })
-})
diff --git a/test/new/tagname-exclusions.browser.test.ts b/test/new/tagname-exclusions.browser.test.ts
index bb5349e..197c553 100644
--- a/test/new/tagname-exclusions.browser.test.ts
+++ b/test/new/tagname-exclusions.browser.test.ts
@@ -29,30 +29,6 @@ test("elements with unmatched name attribute are not matched by tag name", () =>
 	expect(a.children[0]!.getAttribute("name")).toBe("new-anchor")
 })
 
-test("elements with unmatched href attribute are not matched by tag name", () => {
-	const a = dom(`<div><a href="/old">old</a></div>`)
-	const b = dom(`<div><a href="/new">new</a></div>`)
-
-	const original = a.children[0]!
-
-	morph(a, b)
-
-	expect(a.children[0]).not.toBe(original)
-	expect(a.children[0]!.getAttribute("href")).toBe("/new")
-})
-
-test("elements with unmatched src attribute are not matched by tag name", () => {
-	const a = dom(`<div><img src="/old.png"></div>`)
-	const b = dom(`<div><img src="/new.png"></div>`)
-
-	const original = a.children[0]!
-
-	morph(a, b)
-
-	expect(a.children[0]).not.toBe(original)
-	expect(a.children[0]!.getAttribute("src")).toBe("/new.png")
-})
-
 test("input elements are not matched by tag name", () => {
 	const a = dom(`<div><input type="text" class="old"></div>`)
 	const b = dom(`<div><input type="text" class="new"></div>`)

From 415d1428ce6e8def1aed2d17e5413f33eb6e3e8f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 15:41:20 +0000
Subject: [PATCH 2/4] Keep replacing scripts whose src changes

A script doesn't run again when its src changes, so morphing it in place
would stop the new script loading.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LSdDY3ErxNaeULsmoUQS4q
---
 README.md                                  |  2 +-
 src/morphlex.ts                            |  9 +++++++--
 test/new/href-src-in-place.browser.test.ts | 10 ++++++++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 9fe8f2f..8933d9d 100644
--- a/README.md
+++ b/README.md
@@ -186,7 +186,7 @@ When morphing the children of an element, Morphlex pairs each new child with an
 4. An element that contains one of the same `id`s somewhere inside it.
 5. With `preserveChanges`, a checkbox, radio or option the user changed is paired with one making the same choice, such as the same name and value in the same form, and an element such as a `<label>` holding one is paired with an element holding the same choice. This keeps the user’s pick in place when items are added or reordered around it.
 6. An element with the same non-empty `name`, `href` or `src` attribute.
-7. Any element with the same tag name, as long as neither element has an `id` or a non-empty `name`, and neither is a form control. Ids inside the elements don’t count, so a wrapper without its own identity still pairs by position, and an `href` or `src` doesn’t either, so a link, image or iframe whose address changes is updated in place.
+7. Any element with the same tag name, as long as neither element has an `id` or a non-empty `name`, and neither is a form control. Ids inside the elements don’t count, so a wrapper without its own identity still pairs by position, and an `href` or `src` doesn’t either, so a link, image or iframe whose address changes is updated in place. A `<script>` with a `src` still isn’t paired by tag, since it wouldn’t run again.
 
 When a new child’s unique `id` belongs to a live element under another parent that can be morphed into it, the new child isn’t paired here. That element moves to the new child’s place instead (see [Options](#options)).
 
diff --git a/src/morphlex.ts b/src/morphlex.ts
index c60280c..53fc63b 100644
--- a/src/morphlex.ts
+++ b/src/morphlex.ts
@@ -3903,9 +3903,14 @@ function canMorphElementInPlace(from: Element, to: Element): boolean {
 
 // Only an element's own identity counts, so a wrapper holding an id'd element still matches by its tag. An `href` or
 // `src` pairs elements sharing it first, but doesn't stop one matching by its tag, so a link or an iframe whose
-// address changes is updated in place.
+// address changes is updated in place. A script doesn't run again when its `src` changes, so it's still replaced.
 function canSoftMatchByTagName(element: Element): boolean {
-	return idOf(element) === "" && !isFormControl(element) && !getAttribute(element, "name")
+	return (
+		idOf(element) === "" &&
+		!isFormControl(element) &&
+		!getAttribute(element, "name") &&
+		!(localNameOf(element) === "script" && getAttribute(element, "src"))
+	)
 }
 
 // Whether the elements have the same non-empty name, href or src.
diff --git a/test/new/href-src-in-place.browser.test.ts b/test/new/href-src-in-place.browser.test.ts
index 294c70a..556b6b4 100644
--- a/test/new/href-src-in-place.browser.test.ts
+++ b/test/new/href-src-in-place.browser.test.ts
@@ -76,3 +76,13 @@ test("a form control with a changed src is still replaced", () => {
 		removed: 1,
 	})
 })
+
+test("a script whose src changes is still replaced, so the new script can be run", () => {
+	expect(
+		morphChildren(`<script src="data:text/javascript,0"></script>`, `<script src="data:text/javascript,1"></script>`),
+	).toEqual({
+		original: [-1],
+		added: 1,
+		removed: 1,
+	})
+})

From b6a20eddad065f87f0e5961cd99f478172fa77c7 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 15:55:01 +0000
Subject: [PATCH 3/4] Update addresses after other attributes, and keep
 replacing SVG scripts

An iframe's src or a link's href loads as soon as it changes, with the
attributes the element has then, so src, href and srcdoc are updated after
the rest, so sandbox and integrity apply to the new address. An SVG script's
href doesn't run it again either, so it's still replaced.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LSdDY3ErxNaeULsmoUQS4q
---
 AGENTS.md                                  |  4 ++
 src/morphlex.ts                            | 75 ++++++++++++++--------
 test/new/href-src-in-place.browser.test.ts | 44 +++++++++++++
 3 files changed, 95 insertions(+), 28 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 0b12344..2c22718 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -62,6 +62,10 @@ A live target that's in the page is inserted with `moveBefore` too (when it's in
 
 The `isEqualNode` pass gives each target the first free equal element, so when an element changes and a sibling is identical to its old version, the unchanged target takes the changed element's live node and the two would swap places. Identical live elements are interchangeable, so once every sibling is matched, each set of them is given to its targets in order, when that leaves more nodes in place than the order the passes chose (checked once for all the sets, so many sets stay fast). On a tie the passes' order stays, since moving other nodes instead changes which whitespace is reused. An element holding the user's changes is never identical to anything, but the `isEqualNode` pass gives its identical untouched sibling the target in its place, and the changed element takes a later one. So before that, in both modes, each changed element is ordered the same way with the untouched siblings of its shape, whatever targets they took, among targets with the same outline (the shape without attributes other than `is`, or a textarea's text, which is only its default value) and the same choices, counting duplicates, and for targets holding choices, the same attributes apart from `class` and `style`, as the choice pass prefers. Sets without a changed element are left to the ordering above. The kind pass can give an element a target with another outline, and the choice pass can give a changed control a target holding another value than its identical sibling's, so a changed element never trades into either. The shape, name and kind passes can cross changed elements, like inputs holding typed text, so they take their targets in order with the rest. Matching by name, in the name pass and the outline pass, skips an element that would be replaced rather than morphed, like an input of another type, so a same-name input of the target's type keeps its target and the user's text. The name pass still gives the target such an element once no target can take it to morph, because replacing it asks both vetoes before changing anything, while removing it and adding the target doesn't. This order always wins, even when it leaves fewer nodes in place, since the user's text belongs in its own row, whatever other nodes move (Joel's rule that user intent wins). Before the name and kind passes, when a changed element is still without a target, or an untouched sibling gave one its target, the free elements with the same outline as one take the targets with that outline in order, changed elements first, among the targets those passes would give them, so a typed row isn't given the first target of its tag when that has another outline, and an untouched row goes rather than a typed one when there are fewer targets. A target holding a `morphlex-clobber` element only takes an untouched element in that pass, so an earlier clobbered row doesn't shift the typed rows after it. When ordering, a changed element never trades into a target holding a `morphlex-clobber` element: such a target takes the first untouched sibling, and the other targets take the first free sibling while enough untouched ones are left for those. The equal target a changed element takes is morphed, not skipped. Untouched siblings of the same shape that no target took can stay instead of the ones the passes kept, since removing either leaves the same markup, so the ones that stay are chosen (a dynamic program over the siblings in order) to cross the fewest other matches, where crossing a changed element outweighs crossing all the others, and two changed elements crossing outweighs both, so typed rows of different kinds keep their order. On a tie, or when the program would be too big (a morph removing many of many identical siblings), the passes' choice stays.
 
+### Addresses: `href` and `src`
+
+A non-empty `href` or `src` pairs elements sharing it first, but doesn't stop an element matching by its tag, so a link, image or iframe whose address changes is morphed in place: a focused link keeps focus, and Chromium and WebKit keep a stylesheet applied until its new `href` loads. A `name`, an `id` and form controls still block matching by tag. A script with a `src` (or an SVG script with an `href`) is still replaced, because a script doesn't run again when its address changes. An address loads as soon as it changes, with the attributes the element has then, so `#visitAttributes` updates `src`, `href` and `srcdoc` after every other attribute is added, changed or removed, so an iframe's new page gets its `sandbox` and a link's new sheet its `integrity`.
+
 ### Whitespace between elements
 
 Whitespace text nodes are only ever matched with whitespace. The live whitespace stays in place while the children are placed, and target whitespace reuses the live whitespace at the insertion point, so unchanged whitespace isn't removed and added again. Whitespace nothing reused is removed afterwards.
diff --git a/src/morphlex.ts b/src/morphlex.ts
index 53fc63b..6719c09 100644
--- a/src/morphlex.ts
+++ b/src/morphlex.ts
@@ -38,6 +38,8 @@ const CHOICE_PASSES = [
 
 const STYLING_ATTRIBUTES = ["class", "style"]
 const OPEN_ATTRIBUTE = ["open"]
+// Attributes that load what they point to as soon as they change.
+const ADDRESS_ATTRIBUTES = new Set(["src", "href", "srcdoc"])
 
 const Operation = {
 	EqualNode: 0,
@@ -1508,36 +1510,17 @@ class Morph {
 		// The user toggles `open` on these elements, so with `preserveChanges` it's neither added nor removed.
 		const keepsOpen = this.#preserveChanges && hasOpenState(from)
 
-		// First pass: update/add attributes from reference (iterate forwards)
+		// First pass: update/add attributes from reference (iterate forwards). An address loads as soon as it
+		// changes, with the attributes the element has then, like an iframe's `sandbox` or a link's `integrity`,
+		// so addresses are updated last, after the other attributes are added, changed and removed.
 		const toAttributes = attributesOf(to)
+		let addresses: Array<Attr> | null = null
 		for (let i = 0; i < toAttributes.length; i++) {
 			const attribute = toAttributes[i]!
-			const { name, localName, value, namespaceURI } = attribute
-			// Adding `open` would open it, but changing the value of an existing one is fine.
-			if (keepsOpen && name === "open" && namespaceURI === null && !hasAttributeNS(from, null, "open")) continue
-			const oldValue = getAttributeNS(from, namespaceURI, localName)
-
-			if (oldValue === value) continue
-			if (this.#options.beforeAttributeUpdated?.(from, name, value) ?? true) {
-				// Go through `Attr` nodes, because `setAttribute` rejects names the parser accepts, like `@click`.
-				// Look the attribute up after the callback, which may have removed or replaced it.
-				const radios = namespaceURI ? null : this.#uncheckRadiosForAttribute(from, name, value)
-				// Checking a radio unchecks the rest of its group, which gets its check back if the radio then leaves.
-				const group =
-					name === "checked" && namespaceURI === null && isRadio(from) && !from.checked ? checkedRadiosInGroup(from) : null
-				const existing = getAttributeNodeNS(from, namespaceURI, localName)
-				if (existing) {
-					existing.value = value
-				} else if (details && name === "open" && namespaceURI === null) {
-					this.#openDetailsItem(from, value)
-				} else {
-					setAttributeNodeNS(from, attribute.cloneNode() as Attr)
-				}
-				this.#checkRadios(radios)
-				if (group) this.#noteDisplacedRadios(group, from as HTMLInputElement)
-				this.#options.afterAttributeUpdated?.(from, name, oldValue)
+			if (attribute.namespaceURI === null && ADDRESS_ATTRIBUTES.has(attribute.name)) {
+				;(addresses ??= []).push(attribute)
 			} else {
-				this.#noteVetoedAttribute(from, name, namespaceURI)
+				this.#updateAttribute(from, attribute, keepsOpen, details)
 			}
 		}
 
@@ -1566,6 +1549,10 @@ class Morph {
 			}
 		}
 
+		if (addresses) {
+			for (const attribute of addresses) this.#updateAttribute(from, attribute, keepsOpen, details)
+		}
+
 		if (details) this.#noteIntendedOpen(from, to, open)
 
 		if (!this.#preserveChanges) {
@@ -1573,6 +1560,37 @@ class Morph {
 		}
 	}
 
+	// Add the attribute, or update its value, asking the callbacks first.
+	#updateAttribute(from: Element, attribute: Attr, keepsOpen: boolean, details: boolean): void {
+		const { name, localName, value, namespaceURI } = attribute
+		// Adding `open` would open it, but changing the value of an existing one is fine.
+		if (keepsOpen && name === "open" && namespaceURI === null && !hasAttributeNS(from, null, "open")) return
+		const oldValue = getAttributeNS(from, namespaceURI, localName)
+
+		if (oldValue === value) return
+		if (this.#options.beforeAttributeUpdated?.(from, name, value) ?? true) {
+			// Go through `Attr` nodes, because `setAttribute` rejects names the parser accepts, like `@click`.
+			// Look the attribute up after the callback, which may have removed or replaced it.
+			const radios = namespaceURI ? null : this.#uncheckRadiosForAttribute(from, name, value)
+			// Checking a radio unchecks the rest of its group, which gets its check back if the radio then leaves.
+			const group =
+				name === "checked" && namespaceURI === null && isRadio(from) && !from.checked ? checkedRadiosInGroup(from) : null
+			const existing = getAttributeNodeNS(from, namespaceURI, localName)
+			if (existing) {
+				existing.value = value
+			} else if (details && name === "open" && namespaceURI === null) {
+				this.#openDetailsItem(from, value)
+			} else {
+				setAttributeNodeNS(from, attribute.cloneNode() as Attr)
+			}
+			this.#checkRadios(radios)
+			if (group) this.#noteDisplacedRadios(group, from as HTMLInputElement)
+			this.#options.afterAttributeUpdated?.(from, name, oldValue)
+		} else {
+			this.#noteVetoedAttribute(from, name, namespaceURI)
+		}
+	}
+
 	// Note the `open` value the morph means an accordion item to have, whatever the browser does to it:
 	// the target's, unless the update was vetoed, or `preserveChanges` keeps the item open or closed.
 	#noteIntendedOpen(details: Element, to: Element, open: string | null): void {
@@ -3903,13 +3921,14 @@ function canMorphElementInPlace(from: Element, to: Element): boolean {
 
 // Only an element's own identity counts, so a wrapper holding an id'd element still matches by its tag. An `href` or
 // `src` pairs elements sharing it first, but doesn't stop one matching by its tag, so a link or an iframe whose
-// address changes is updated in place. A script doesn't run again when its `src` changes, so it's still replaced.
+// address changes is updated in place. A script doesn't run again when its `src` (or an SVG script's `href`)
+// changes, so it's still replaced.
 function canSoftMatchByTagName(element: Element): boolean {
 	return (
 		idOf(element) === "" &&
 		!isFormControl(element) &&
 		!getAttribute(element, "name") &&
-		!(localNameOf(element) === "script" && getAttribute(element, "src"))
+		!(localNameOf(element) === "script" && (getAttribute(element, "src") || getAttribute(element, "href")))
 	)
 }
 
diff --git a/test/new/href-src-in-place.browser.test.ts b/test/new/href-src-in-place.browser.test.ts
index 556b6b4..8255195 100644
--- a/test/new/href-src-in-place.browser.test.ts
+++ b/test/new/href-src-in-place.browser.test.ts
@@ -86,3 +86,47 @@ test("a script whose src changes is still replaced, so the new script can be run
 		removed: 1,
 	})
 })
+
+test("an SVG script whose href changes is still replaced", () => {
+	const from = document.createElement("div")
+	from.innerHTML = `<svg><script href="data:text/javascript,0"></script></svg>`
+	const script = from.querySelector("script")
+	const to = document.createElement("div")
+	to.innerHTML = `<svg><script href="data:text/javascript,1"></script></svg>`
+	const expected = to.innerHTML
+
+	morph(from, to)
+
+	expect(from.querySelector("script")).not.toBe(script)
+	expect(from.innerHTML).toBe(expected)
+})
+
+// The order the attributes of the element were updated in.
+function attributeUpdates(fromHTML: string, toHTML: string): Array<string> {
+	const from = document.createElement("div")
+	from.innerHTML = fromHTML
+	const to = document.createElement("div")
+	to.innerHTML = toHTML
+	const updates: Array<string> = []
+
+	morph(from, to, { afterAttributeUpdated: (_element, name) => updates.push(name) })
+
+	expect(from.innerHTML).toBe(to.innerHTML)
+	return updates
+}
+
+test("an iframe's src changes after its sandbox, so the new page loads sandboxed", () => {
+	expect(attributeUpdates(`<iframe src="about:blank#a"></iframe>`, `<iframe src="about:blank#b" sandbox=""></iframe>`)).toEqual([
+		"sandbox",
+		"src",
+	])
+})
+
+test("a link's href changes after its integrity is updated or removed", () => {
+	expect(
+		attributeUpdates(
+			`<link rel="stylesheet" href="data:text/css,a" integrity="sha256-a" crossorigin="">`,
+			`<link rel="stylesheet" href="data:text/css,b" integrity="sha256-b">`,
+		),
+	).toEqual(["integrity", "crossorigin", "href"])
+})

From 0e61474f6d4a8de6f340c763adc699ca03a93988 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 8 Oct 2026 16:03:39 +0000
Subject: [PATCH 4/4] Update srcdoc before src, and keep replacing media
 sources

An iframe's srcdoc takes precedence over its src, so setting src first could
start a load the srcdoc replaces. A media element doesn't look at a source
again when its src changes, so a source is still replaced.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LSdDY3ErxNaeULsmoUQS4q
---
 AGENTS.md                                  |  2 +-
 README.md                                  |  2 +-
 src/morphlex.ts                            | 10 +++++++---
 test/new/href-src-in-place.browser.test.ts | 14 ++++++++++++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 2c22718..b9b8d7d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -64,7 +64,7 @@ The `isEqualNode` pass gives each target the first free equal element, so when a
 
 ### Addresses: `href` and `src`
 
-A non-empty `href` or `src` pairs elements sharing it first, but doesn't stop an element matching by its tag, so a link, image or iframe whose address changes is morphed in place: a focused link keeps focus, and Chromium and WebKit keep a stylesheet applied until its new `href` loads. A `name`, an `id` and form controls still block matching by tag. A script with a `src` (or an SVG script with an `href`) is still replaced, because a script doesn't run again when its address changes. An address loads as soon as it changes, with the attributes the element has then, so `#visitAttributes` updates `src`, `href` and `srcdoc` after every other attribute is added, changed or removed, so an iframe's new page gets its `sandbox` and a link's new sheet its `integrity`.
+A non-empty `href` or `src` pairs elements sharing it first, but doesn't stop an element matching by its tag, so a link, image or iframe whose address changes is morphed in place: a focused link keeps focus, and Chromium and WebKit keep a stylesheet applied until its new `href` loads. A `name`, an `id` and form controls still block matching by tag. A script with a `src` (or an SVG script with an `href`) and a media `source` with a `src` are still replaced, because a script doesn't run again when its address changes, and a media element doesn't look at a source again. An address loads as soon as it changes, with the attributes the element has then, so `#visitAttributes` updates `srcdoc`, `src` and `href` after every other attribute is added, changed or removed, so an iframe's new page gets its `sandbox` and a link's new sheet its `integrity`. `srcdoc` goes first, since it takes precedence over `src`. A link whose `rel` changes along with its `href` can briefly load the old `href` for its new `rel`; that's rare enough to leave.
 
 ### Whitespace between elements
 
diff --git a/README.md b/README.md
index 8933d9d..a0c8284 100644
--- a/README.md
+++ b/README.md
@@ -186,7 +186,7 @@ When morphing the children of an element, Morphlex pairs each new child with an
 4. An element that contains one of the same `id`s somewhere inside it.
 5. With `preserveChanges`, a checkbox, radio or option the user changed is paired with one making the same choice, such as the same name and value in the same form, and an element such as a `<label>` holding one is paired with an element holding the same choice. This keeps the user’s pick in place when items are added or reordered around it.
 6. An element with the same non-empty `name`, `href` or `src` attribute.
-7. Any element with the same tag name, as long as neither element has an `id` or a non-empty `name`, and neither is a form control. Ids inside the elements don’t count, so a wrapper without its own identity still pairs by position, and an `href` or `src` doesn’t either, so a link, image or iframe whose address changes is updated in place. A `<script>` with a `src` still isn’t paired by tag, since it wouldn’t run again.
+7. Any element with the same tag name, as long as neither element has an `id` or a non-empty `name`, and neither is a form control. Ids inside the elements don’t count, so a wrapper without its own identity still pairs by position, and an `href` or `src` doesn’t either, so a link, image or iframe whose address changes is updated in place. A `<script>` or media `<source>` with a `src` still isn’t paired by tag, since it wouldn’t be loaded again.
 
 When a new child’s unique `id` belongs to a live element under another parent that can be morphed into it, the new child isn’t paired here. That element moves to the new child’s place instead (see [Options](#options)).
 
diff --git a/src/morphlex.ts b/src/morphlex.ts
index 6719c09..c3d5c7d 100644
--- a/src/morphlex.ts
+++ b/src/morphlex.ts
@@ -40,6 +40,8 @@ const STYLING_ATTRIBUTES = ["class", "style"]
 const OPEN_ATTRIBUTE = ["open"]
 // Attributes that load what they point to as soon as they change.
 const ADDRESS_ATTRIBUTES = new Set(["src", "href", "srcdoc"])
+// Elements that don't load their new address when it changes, so they're replaced rather than matched by tag.
+const REPLACED_ON_ADDRESS_CHANGE = new Set(["script", "source"])
 
 const Operation = {
 	EqualNode: 0,
@@ -1518,7 +1520,9 @@ class Morph {
 		for (let i = 0; i < toAttributes.length; i++) {
 			const attribute = toAttributes[i]!
 			if (attribute.namespaceURI === null && ADDRESS_ATTRIBUTES.has(attribute.name)) {
-				;(addresses ??= []).push(attribute)
+				// An iframe's `srcdoc` takes precedence over its `src`, so it goes first.
+				if (attribute.name === "srcdoc") (addresses ??= []).unshift(attribute)
+				else (addresses ??= []).push(attribute)
 			} else {
 				this.#updateAttribute(from, attribute, keepsOpen, details)
 			}
@@ -3922,13 +3926,13 @@ function canMorphElementInPlace(from: Element, to: Element): boolean {
 // Only an element's own identity counts, so a wrapper holding an id'd element still matches by its tag. An `href` or
 // `src` pairs elements sharing it first, but doesn't stop one matching by its tag, so a link or an iframe whose
 // address changes is updated in place. A script doesn't run again when its `src` (or an SVG script's `href`)
-// changes, so it's still replaced.
+// changes, and a media element doesn't look at a source again, so they're still replaced.
 function canSoftMatchByTagName(element: Element): boolean {
 	return (
 		idOf(element) === "" &&
 		!isFormControl(element) &&
 		!getAttribute(element, "name") &&
-		!(localNameOf(element) === "script" && (getAttribute(element, "src") || getAttribute(element, "href")))
+		!(REPLACED_ON_ADDRESS_CHANGE.has(localNameOf(element)) && (getAttribute(element, "src") || getAttribute(element, "href")))
 	)
 }
 
diff --git a/test/new/href-src-in-place.browser.test.ts b/test/new/href-src-in-place.browser.test.ts
index 8255195..89e6f67 100644
--- a/test/new/href-src-in-place.browser.test.ts
+++ b/test/new/href-src-in-place.browser.test.ts
@@ -130,3 +130,17 @@ test("a link's href changes after its integrity is updated or removed", () => {
 		),
 	).toEqual(["integrity", "crossorigin", "href"])
 })
+
+test("an iframe's srcdoc changes before its src, so the src never starts loading", () => {
+	expect(
+		attributeUpdates(`<iframe src="about:blank#a"></iframe>`, `<iframe src="about:blank#b" srcdoc="<p>b</p>"></iframe>`),
+	).toEqual(["srcdoc", "src"])
+})
+
+test("a media source whose src changes is still replaced, so the media element picks it up", () => {
+	expect(morphChildren(`<source src="data:video/mp4,a">`, `<source src="data:video/mp4,b">`)).toEqual({
+		original: [-1],
+		added: 1,
+		removed: 1,
+	})
+})