make changes runes-mode-only

packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -633,22 +633,29 @@ function build_custom_element_attribute_update_assignment(node_id, attribute, co
 	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
 	let { has_call, value } = build_attribute_value(attribute.value, context);
 
-	// if it's quoted, it's an attribute, otherwise it's a property
+	/** @type {Statement} */
-	const is_attribute = is_array(attribute.value);
+	let update;
 
-	if (dev) {
+	if (context.state.analysis.runes) {
-		if (is_attribute && !is_ignored(attribute, 'custom_element_invalid_attribute')) {
+		// if it's quoted, it's an attribute, otherwise it's a property
-			state.init.push(b.stmt(b.call('$.warn_if_property', node_id, b.literal(name))));
+		const is_attribute = is_array(attribute.value);
-		}
+
+		if (dev) {
+			if (is_attribute && !is_ignored(attribute, 'custom_element_invalid_attribute')) {
+				state.init.push(b.stmt(b.call('$.warn_if_property', node_id, b.literal(name))));
+			}
 
-		if (!is_attribute && !is_ignored(attribute, 'custom_element_invalid_property')) {
+			if (!is_attribute && !is_ignored(attribute, 'custom_element_invalid_property')) {
-			state.init.push(b.stmt(b.call('$.warn_if_attribute', node_id, b.literal(name))));
+				state.init.push(b.stmt(b.call('$.warn_if_attribute', node_id, b.literal(name))));
+			}
 		}
-	}
 
-	const update = is_attribute
+		update = is_attribute
-		? b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value))
+			? b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value))
-		: b.stmt(b.assignment('=', b.member(node_id, name), value));
+			: b.stmt(b.assignment('=', b.member(node_id, name), value));
+	} else {
+		update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
+	}
 
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {

packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js

@@ -240,7 +240,7 @@ export function build_element_attributes(node, context) {
 				continue;
 			}
 
-			if (is_array(attribute.value) || !node.name.includes('-')) {
+			if (is_array(attribute.value) || !node.name.includes('-') || !context.state.analysis.runes) {
 				const name = get_attribute_name(node, attribute, context);
 				const value = build_attribute_value(
 					attribute.value,

packages/svelte/src/internal/client/dom/elements/attributes.js

@@ -154,6 +154,23 @@ export function warn_if_property(element, name) {
 	}
 }
 
+/**
+ * @param {any} node
+ * @param {string} prop
+ * @param {any} value
+ */
+export function set_custom_element_data(node, prop, value) {
+	if (prop in node) {
+		var curr_val = node[prop];
+		var next_val = typeof curr_val === 'boolean' && value === '' ? true : value;
+		if (typeof curr_val !== 'object' || curr_val !== next_val) {
+			node[prop] = next_val;
+		}
+	} else {
+		set_attribute(node, prop, value);
+	}
+}
+
 /**
  * Spreads attributes onto a DOM element, taking into account the currently set attributes
  * @param {Element & ElementCSSInlineStyle} element

packages/svelte/src/internal/client/index.js

@@ -33,6 +33,7 @@ export {
 	handle_lazy_img,
 	set_value,
 	set_checked,
+	set_custom_element_data,
 	warn_if_attribute,
 	warn_if_property
 } from './dom/elements/attributes.js';

packages/svelte/tests/runtime-browser/custom-elements-samples/reflect-attributes/main.svelte

@@ -14,8 +14,7 @@
 <div>hi</div>
 <p>hi</p>
 <button on:click={() => (red = false)}>off</button>
-<!-- prettier-ignore -->
+<my-widget {red} white=""></my-widget>
-<my-widget red="{red || undefined}" white=""></my-widget>
 
 <style>
 	:host([red]) div {

packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/main.svelte

@@ -30,4 +30,4 @@
 	window.customElements.define('my-custom-inheritance-element', Extended);
 </script>
 
-<my-custom-inheritance-element camelCase={{ text: 'World' }} text={'!'} />
+<my-custom-inheritance-element camelCase={{ text: 'World' }} text="!" />