fix: allow slot attribute inside snippets (#12188)

Someone could render a snippet into a custom element, and therefore elements with slot attributes should be allowed within them and be treated as regular elements
closes #12158

.changeset/seven-bees-tell.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow slot attribute inside snippets

packages/svelte/src/compiler/phases/2-analyze/validation.js

@@ -256,8 +256,16 @@ function validate_attribute_name(attribute) {
  * @param {boolean} is_component
  */
 function validate_slot_attribute(context, attribute, is_component = false) {
+	const parent = context.path.at(-2);
 	let owner = undefined;
 
+	if (parent?.type === 'SnippetBlock') {
+		if (!is_text_attribute(attribute)) {
+			e.slot_attribute_invalid(attribute);
+		}
+		return;
+	}
+
 	let i = context.path.length;
 	while (i--) {
 		const ancestor = context.path[i];
@@ -283,7 +291,7 @@ function validate_slot_attribute(context, attribute, is_component = false) {
 			owner.type === 'SvelteComponent' ||
 			owner.type === 'SvelteSelf'
 		) {
-			if (owner !== context.path.at(-2)) {
+			if (owner !== parent) {
 				e.slot_attribute_invalid_placement(attribute);
 			}
 

packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/Component.svelte

@@ -0,0 +1,18 @@
+<script context="module">
+	if (!customElements.get('my-custom-element')) {
+		customElements.define('my-custom-element', class extends HTMLElement {
+			connectedCallback() {
+				this.attachShadow({ mode: 'open' });
+				this.shadowRoot.innerHTML = '|<slot></slot>|<slot name="slot"></slot>|';
+			}
+		});
+	}
+</script>
+
+<script>
+	const { children } = $props();
+</script>
+
+<my-custom-element>
+	{@render children()}
+</my-custom-element>

packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/_config.js

@@ -0,0 +1,22 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client', 'server'],
+	html: `<my-custom-element>Default <span slot="slot">Slotted</span></my-custom-element>`,
+	test({ target, assert }) {
+		const shadowRoot = /** @type {ShadowRoot} */ (
+			target.querySelector('my-custom-element')?.shadowRoot
+		);
+		const [defaultSlot, namedSlot] = shadowRoot.querySelectorAll('slot');
+		const assignedDefaultNodes = defaultSlot.assignedNodes();
+		const assignedNamedNodes = namedSlot.assignedNodes();
+
+		assert.equal(assignedDefaultNodes.length, 1);
+		assert.equal(assignedNamedNodes.length, 1);
+		assert.htmlEqual(assignedDefaultNodes[0].textContent || '', `Default`);
+		assert.htmlEqual(
+			/** @type {HTMLElement} */ (assignedNamedNodes[0]).outerHTML,
+			`<span slot="slot">Slotted</span>`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	import Component from './Component.svelte';
+</script>
+
+<Component>
+	{#snippet children()}
+		Default
+		<span slot="slot">Slotted</span>
+	{/snippet}
+</Component>