fix: take custom attribute name into account when reflecting property (#9140)

fixes #9134

Author: teobgeno

.changeset/tame-tomatoes-warn.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: take custom attribute name into account when reflecting property

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);
 							}

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>

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);
+}