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 <[email protected]>

Author: dummdidumm

.changeset/wild-moose-destroy.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't skip custom elements with attributes

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;

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';

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

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

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>