From 419546f29b4d9a6015051639dfabb12d080088f1 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 21 Aug 2024 05:11:51 +0200
Subject: [PATCH] fix: don't skip custom elements with attributes (#12939)

* fix: don't skip custom elements with attributes

fixes #12934

* still need this

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/wild-moose-destroy.md                          | 5 +++++
 .../compiler/phases/2-analyze/visitors/RegularElement.js  | 8 +++++++-
 .../phases/3-transform/client/visitors/shared/fragment.js | 2 +-
 .../skip-static-subtree/_expected/client/index.svelte.js  | 8 +++++++-
 .../skip-static-subtree/_expected/server/index.svelte.js  | 2 +-
 .../snapshot/samples/skip-static-subtree/index.svelte     | 4 ++++
 6 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/wild-moose-destroy.md

diff --git a/.changeset/wild-moose-destroy.md b/.changeset/wild-moose-destroy.md
new file mode 100644
index 000000000000..9dfc8d2bc1b8
--- /dev/null
+++ b/.changeset/wild-moose-destroy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't skip custom elements with attributes
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 16be82ed2ca6..dc283db7e262 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -7,10 +7,11 @@ import {
 } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { create_attribute } from '../../nodes.js';
+import { create_attribute, is_custom_element_node } from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
 import { check_element } from './shared/a11y.js';
 import { validate_element } from './shared/element.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {RegularElement} node
@@ -88,6 +89,11 @@ export function RegularElement(node, context) {
 	node.metadata.svg = is_svg(node.name);
 	node.metadata.mathml = is_mathml(node.name);
 
+	if (is_custom_element_node(node) && node.attributes.length > 0) {
+		// we're setting all attributes on custom elements through properties
+		mark_subtree_dynamic(context.path);
+	}
+
 	if (context.state.parent_element) {
 		let past_parent = false;
 		let only_warn = false;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index cbe027282710..6dcb794f2c3e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -1,6 +1,6 @@
 /** @import { Expression } from 'estree' */
 /** @import { ExpressionTag, SvelteNode, Text } from '#compiler' */
-/** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+/** @import { ComponentContext } from '../../types' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_template_literal, build_update } from './utils.js';
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 5eacd941eaaa..4f59c4932e2b 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main>`, 1);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -15,6 +15,12 @@ export default function Skip_static_subtree($$anchor, $$props) {
 
 	$.html(node, () => $$props.content, false, false);
 	$.reset(main);
+
+	var cant_skip = $.sibling(main, 2);
+	var custom_elements = $.child(cant_skip);
+
+	$.set_custom_element_data(custom_elements, "with", "attributes");
+	$.reset(cant_skip);
 	$.template_effect(() => $.set_text(text, $$props.title));
 	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 8ea5fc9b13c3..1018b5425e3a 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main>`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
index 001196a879bc..cc9d8172e6da 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -19,3 +19,7 @@
 	<p>ones</p>
 	{@html content}
 </main>
+
+<cant-skip>
+	<custom-elements with="attributes"></custom-elements>
+</cant-skip>