feat: warn on possible implicit snippet shadowing

.changeset/honest-steaks-grow.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: warn on possible implicit snippet shadowing

packages/svelte/messages/compile-warnings/template.md

@@ -38,6 +38,10 @@
 
 > Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
 
+## implicit_children_possible_shadowing
+
+> if `%name%` is using `{@render}` the attribute `children` will shadow the implicit snippet
+
 ## slot_element_deprecated
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead

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

@@ -107,6 +107,10 @@ function validate_component(node, context) {
 			if (attribute.name === 'slot') {
 				validate_slot_attribute(context, attribute, true);
 			}
+
+			if (attribute.name === 'children' && node.fragment.nodes.length > 0) {
+				w.implicit_children_possible_shadowing(node, node.name);
+			}
 		}
 	}
 

packages/svelte/src/compiler/warnings.js

@@ -114,6 +114,7 @@ export const codes = [
 	"component_name_lowercase",
 	"element_invalid_self_closing_tag",
 	"event_directive_deprecated",
+	"implicit_children_possible_shadowing",
 	"slot_element_deprecated",
 	"svelte_element_invalid_this"
 ];
@@ -739,6 +740,15 @@ export function event_directive_deprecated(node, name) {
 	w(node, "event_directive_deprecated", `Using \`on:${name}\` to listen to the ${name} event is deprecated. Use the event attribute \`on${name}\` instead`);
 }
 
+/**
+ * if `%name%` is using `{@render}` the attribute `children` will shadow the implicit snippet
+ * @param {null | NodeLike} node
+ * @param {string} name
+ */
+export function implicit_children_possible_shadowing(node, name) {
+	w(node, "implicit_children_possible_shadowing", `if \`${name}\` is using \`{@render}\` the attribute \`children\` will shadow the implicit snippet`);
+}
+
 /**
  * Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
  * @param {null | NodeLike} node

packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/input.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Component from './Component.svelte';
+	import Legacy from './Legacy.svelte';
+</script>
+
+<Component children="foo">Children</Component>
+
+<Component children="foo" />
+
+<Component children="foo"></Component>
+
+<!-- svelte-ignore implicit_children_possible_shadowing -->
+<Legacy children="foo">Legacy</Legacy>

packages/svelte/tests/validator/samples/implicit-children-possible-shadowing/warnings.json

@@ -0,0 +1,14 @@
+[
+	{
+		"code": "implicit_children_possible_shadowing",
+		"end": {
+			"column": 46,
+			"line": 6
+		},
+		"message": "if `Component` is using `{@render}` the attribute `children` will shadow the implicit snippet",
+		"start": {
+			"column": 0,
+			"line": 6
+		}
+	}
+]