diff --git a/CHANGELOG.md b/CHANGELOG.md
index dce6d47858..1f93815185 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
# Svelte changelog
+## Unreleased
+
+* Allow access to `let:` variables in sibling attributes on slot root ([#4173](https://github.com/sveltejs/svelte/issues/4173))
+
## 3.17.1
* Only attach SSR mode markers to a component's `` elements when compiling with `hydratable: true` ([#4258](https://github.com/sveltejs/svelte/issues/4258))
diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
index a3b8dc7286..e8108858c5 100644
--- a/src/compiler/compile/nodes/Element.ts
+++ b/src/compiler/compile/nodes/Element.ts
@@ -151,6 +151,11 @@ export default class Element extends Node {
}
}
+ const has_let = info.attributes.some(node => node.type === 'Let');
+ if (has_let) {
+ scope = scope.child();
+ }
+
// Binding relies on Attribute, defer its evaluation
const order = ['Binding']; // everything else is -1
info.attributes.sort((a, b) => order.indexOf(a.type) - order.indexOf(b.type));
@@ -181,9 +186,16 @@ export default class Element extends Node {
this.handlers.push(new EventHandler(component, this, scope, node));
break;
- case 'Let':
- this.lets.push(new Let(component, this, scope, node));
+ case 'Let': {
+ const l = new Let(component, this, scope, node);
+ this.lets.push(l);
+ const dependencies = new Set([l.name.name]);
+
+ l.names.forEach(name => {
+ scope.add(name, dependencies, this);
+ });
break;
+ }
case 'Transition':
{
@@ -202,20 +214,7 @@ export default class Element extends Node {
}
});
- if (this.lets.length > 0) {
- this.scope = scope.child();
-
- this.lets.forEach(l => {
- const dependencies = new Set([l.name.name]);
-
- l.names.forEach(name => {
- this.scope.add(name, dependencies, this);
- });
- });
- } else {
- this.scope = scope;
- }
-
+ this.scope = scope;
this.children = map_children(component, this, this.scope, info.children);
this.validate();
diff --git a/test/runtime/samples/component-slot-let-g/A.svelte b/test/runtime/samples/component-slot-let-g/A.svelte
new file mode 100644
index 0000000000..4f4ac95014
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-g/A.svelte
@@ -0,0 +1,5 @@
+
+
+
\ No newline at end of file
diff --git a/test/runtime/samples/component-slot-let-g/_config.js b/test/runtime/samples/component-slot-let-g/_config.js
new file mode 100644
index 0000000000..aaa9895ea8
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-g/_config.js
@@ -0,0 +1,22 @@
+export default {
+ html: `
+ 1
+ 0
+ `,
+ async test({ assert, target, component, window }) {
+ component.x = 2;
+
+ assert.htmlEqual(target.innerHTML, `
+ 2
+ 0
+ `);
+
+ const span = target.querySelector('span');
+ await span.dispatchEvent(new window.MouseEvent('click'));
+
+ assert.htmlEqual(target.innerHTML, `
+ 2
+ 2
+ `);
+ }
+};
diff --git a/test/runtime/samples/component-slot-let-g/main.svelte b/test/runtime/samples/component-slot-let-g/main.svelte
new file mode 100644
index 0000000000..e7d4890e6b
--- /dev/null
+++ b/test/runtime/samples/component-slot-let-g/main.svelte
@@ -0,0 +1,17 @@
+
+
+
+ y = reflected}
+ slot="foo"
+ let:reflected
+ class={reflected}
+ >
+ {reflected}
+
+
+{ y }
\ No newline at end of file