fix: allow mixing slots and snippets in custom elements mode (#12929)

We need to allow mixing those within custom element components because in a future version of Svelte where we remove the Svelte-version of slots, we'll preserve slots as-is, and people should use those within their components. At the same time they should be able to make use of snippets for reusable blocks of code.

Also document that you should continue using slots within custom elements.

closes #12892

Author: dummdidumm

.changeset/old-planets-bow.md

@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow mixing slots and snippets in custom elements mode

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

@@ -649,7 +649,10 @@ export function analyze_component(root, source, options) {
 		);
 	}
 
-	if (analysis.uses_render_tags && (analysis.uses_slots || analysis.slot_names.size > 0)) {
+	if (
+		analysis.uses_render_tags &&
+		(analysis.uses_slots || (!analysis.custom_element && analysis.slot_names.size > 0))
+	) {
 		const pos = analysis.slot_names.values().next().value ?? analysis.source.indexOf('$$slot');
 		e.slot_snippet_conflict(pos);
 	}

packages/svelte/src/compiler/phases/types.d.ts

@@ -63,6 +63,10 @@ export interface ComponentAnalysis extends Analysis {
 	event_directive_node: OnDirective | null;
 	/** true if uses event attributes (onclick) on a DOM element */
 	uses_event_attributes: boolean;
+	/**
+	 * Contains the content of `<svelte:options customElement={...} />`,
+	 * or if not present a boolean which corresponds to the compiler option value
+	 */
 	custom_element: boolean | SvelteOptions['customElement'];
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;

sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md

@@ -265,3 +265,5 @@ In advanced scenarios, you may need to create a snippet programmatically. For th
 In Svelte 4, content can be passed to components using [slots](https://svelte.dev/docs/special-elements#slot). Snippets are more powerful and flexible, and as such slots are deprecated in Svelte 5.
 
 They continue to work, however, and you can mix and match snippets and slots in your components.
+
+When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.

sites/svelte-5-preview/src/routes/docs/content/02-examples/04-old-vs-new.md

@@ -293,3 +293,5 @@ Combined with event attributes, this reduces the number of concepts to learn —
 
 - [Before](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACn2PzYrCQBCEX6XpSxTE3GeTgPoYzh5i0sHB-WOmIywh776ZjCgieOsqqvrrnnBQmiKK84S2NYQCD97jDvnPJxHvpJkWHd0YuuRUsQvKcyOtZGW8CwzHkdlZGIIzUOzLLPe5WvxIW5Wvjq0eaWdFp1V3q6fNFuoGWk2BN8UpedQDXwkua7LYzqCJhQ_Or1TJaxGm5MxpfV7ZLGca16tBUY-Cw0jz7vlVjnx97PJ-2MqqonYMCVTLJWoI7q0eSSKUTSLnzjJ-sn_nfxmfF-FdAQAA)
 - [After](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo2PzW6DMBCEX2XlVgIkBHcKUdo-RumBwqJYNbZlL5Eqy-9e_9DkkEtv3vHMzn6OrVygZd2HY3LakHXsVWtWM_rRcbBXFIRhtmo3c1R6Oxuu6TTKkfimlSF424mUhNWoDYqmzWOTo8XLKPv2npH94VZyFnz-HlxZwXCCSaChsniPGi5AF4SvZCwqn7rck5VcaySYL1wsBmWpjdKVj58jpWXgopQU1x52H_tz5ylwbGrhK8eFdWR29PUNO1v-Sy7CHe52SQ1N08RqCx4GeE7PsnpAz0Tg_twH2TmsWNDcwcZQuiFcJ7HjyKqEkLMh8Ajx6X8BPkQdmscBAAA=)
+
+> When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.