Nesting components with Svelte 5 snippet parameters with the same name can cause ESLint errors

[trevorparscal]

Describe the bug

When components in nested scopes use the same snippet names, ESLint's no-shadow rule detects that the inner scope is shadowing the snippet name from the outer scope.

While the example shows a contrived use-case, I ran into this pretty quickly once I started creating reusable UI components. I've temporarily disabled ESLint's no-shadow rule, but of course that isn't ideal.

Reproduction

Example with ESLint configuration on GitHub

Example with the same code on REPL

Logs

[{
	"resource": "/Users/trevorparscal/Sites/svelte-issue/src/routes/+page.svelte",
	"owner": "eslint4",
	"code": {
		"value": "no-shadow",
		"target": {
			"$mid": 1,
			"path": "/docs/latest/rules/no-shadow",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "'icon' is already declared in the upper scope on line 16 column 12.",
	"source": "eslint",
	"startLineNumber": 22,
	"startColumn": 13,
	"endLineNumber": 22,
	"endColumn": 17
},{
	"resource": "/Users/trevorparscal/Sites/svelte-issue/src/routes/+page.svelte",
	"owner": "eslint4",
	"code": {
		"value": "no-shadow",
		"target": {
			"$mid": 1,
			"path": "/docs/latest/rules/no-shadow",
			"scheme": "https",
			"authority": "eslint.org"
		}
	},
	"severity": 8,
	"message": "'label' is already declared in the upper scope on line 13 column 12.",
	"source": "eslint",
	"startLineNumber": 27,
	"startColumn": 13,
	"endLineNumber": 27,
	"endColumn": 18
}]

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 66.11 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
    bun: 1.1.12 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 129.1.70.123
    Chrome: 126.0.6478.127
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.264

Severity

annoyance

[ota-meshi]

I think that rule correctly reports shadowing, why do you think it's not ideal?

[trevorparscal]

Agreed, it's not a bug in ESLint. What's not ideal is that it's quite common for components to accept parameters with the same names, and for them to be nested, so this makes the use of snippets as parameters break in what is likely a common case.

[ota-meshi]

Oh I see. So snippet tags define variables, but users don't intend variable definitions, and no-shadow rule doesn't seem to work well when slot names are intended.
I think we need to create a rule that extends no-shadow rule, and the new rule will exclude snippet tags used only with slot names from reporting.

[baseballyama]

no-shadow rules uses scope manager, and I'm not sure how to proxy scope manager, so maybe we need to copy entire rule and add some logic.

https://github.com/eslint/eslint/blob/main/lib/rules/no-shadow.js

[baseballyama]

Fixed by sveltejs/svelte-eslint-parser#645.
Please try to use svelte-eslint-parser 1.0.0-next.13.