From d281457b2156fb40152c10b774327c039a82760f Mon Sep 17 00:00:00 2001
From: teobgeno <teobgeno@gmail.com>
Date: Thu, 24 Aug 2023 11:54:09 +0300
Subject: [PATCH 1/2] fix: custom element reflected attribute remove fails when
 attribute and props property have different values

---
 .changeset/tame-tomatoes-warn.md              |  5 ++++
 .../svelte/src/runtime/internal/Component.js  |  2 +-
 .../reflect-attributes-add-remove/main.svelte | 23 +++++++++++++++++++
 .../reflect-attributes-add-remove/test.js     | 19 +++++++++++++++
 4 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tame-tomatoes-warn.md
 create mode 100644 packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/main.svelte
 create mode 100644 packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/test.js

diff --git a/.changeset/tame-tomatoes-warn.md b/.changeset/tame-tomatoes-warn.md
new file mode 100644
index 000000000000..a40350091c44
--- /dev/null
+++ b/.changeset/tame-tomatoes-warn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: custom element reflected attribute remove fails when attribute and props property have different values
diff --git a/packages/svelte/src/runtime/internal/Component.js b/packages/svelte/src/runtime/internal/Component.js
index bc5b117c2ff0..2bfdb6fd4899 100644
--- a/packages/svelte/src/runtime/internal/Component.js
+++ b/packages/svelte/src/runtime/internal/Component.js
@@ -283,7 +283,7 @@ if (typeof HTMLElement === 'function') {
 								'toAttribute'
 							);
 							if (attribute_value == null) {
-								this.removeAttribute(key);
+								this.removeAttribute(this.$$p_d[key].attribute || key);
 							} else {
 								this.setAttribute(this.$$p_d[key].attribute || key, attribute_value);
 							}
diff --git a/packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/main.svelte b/packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/main.svelte
new file mode 100644
index 000000000000..c5c80c16a3e4
--- /dev/null
+++ b/packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/main.svelte
@@ -0,0 +1,23 @@
+<svelte:options
+	customElement={{
+		tag: 'custom-element',
+		props: {
+			expanded: { reflect: true, type: 'Boolean', attribute: 'aria-expanded' }
+		}
+	}}
+/>
+
+<script>
+	export let expanded = false;
+</script>
+
+<div>
+	<button on:click={() => (expanded = !expanded)}>Toggle</button>
+	<div class:hidden={!expanded}>Hidden Text</div>
+</div>
+
+<style>
+	.hidden {
+		display: none;
+	}
+</style>
diff --git a/packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/test.js b/packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/test.js
new file mode 100644
index 000000000000..d973039983b9
--- /dev/null
+++ b/packages/svelte/test/runtime-browser/custom-elements-samples/reflect-attributes-add-remove/test.js
@@ -0,0 +1,19 @@
+import * as assert from 'assert.js';
+import { tick } from 'svelte';
+import './main.svelte';
+
+export default async function (target) {
+	const element = document.createElement('custom-element');
+	target.appendChild(element);
+	await tick();
+
+	const el = target.querySelector('custom-element');
+	el.shadowRoot.querySelector('button').click();
+	await tick();
+
+	assert.equal(el.getAttribute('aria-expanded'), '');
+	el.shadowRoot.querySelector('button').click();
+	await tick();
+
+	assert.equal(el.getAttribute('aria-expanded'), null);
+}

From 01da9c6cf9a99932f471809ef29007472f1cf246 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 24 Aug 2023 16:17:23 +0200
Subject: [PATCH 2/2] Update .changeset/tame-tomatoes-warn.md

---
 .changeset/tame-tomatoes-warn.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/tame-tomatoes-warn.md b/.changeset/tame-tomatoes-warn.md
index a40350091c44..eafba8820867 100644
--- a/.changeset/tame-tomatoes-warn.md
+++ b/.changeset/tame-tomatoes-warn.md
@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-fix: custom element reflected attribute remove fails when attribute and props property have different values
+fix: take custom attribute name into account when reflecting property