diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 12cf7aaa1f..80b4c7ca7a 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -199,7 +199,7 @@ export default class ElementWrapper extends Wrapper { } // add directive and handler dependencies - [node.animation, node.outro, ...node.actions, ...node.classes].forEach(directive => { + [node.animation, node.outro, ...node.actions, ...node.classes, ...node.styles].forEach(directive => { if (directive && directive.expression) { block.add_dependencies(directive.expression.dependencies); } diff --git a/test/runtime/samples/inline-style-directive-shorthand/_config.js b/test/runtime/samples/inline-style-directive-shorthand/_config.js index 64043e5269..352d4a139c 100644 --- a/test/runtime/samples/inline-style-directive-shorthand/_config.js +++ b/test/runtime/samples/inline-style-directive-shorthand/_config.js @@ -1,18 +1,25 @@ export default { html: `

+

`, test({ assert, component, target, window }) { - const p = target.querySelector('p'); + const [p1, p2] = target.querySelectorAll('p'); - let styles = window.getComputedStyle(p); - assert.equal(styles.color, 'red'); + assert.equal(window.getComputedStyle(p1).color, 'red'); + assert.equal(window.getComputedStyle(p2).color, 'red'); component.color = 'blue'; - assert.htmlEqual(target.innerHTML, '

'); + assert.htmlEqual( + target.innerHTML, + ` +

+

+ ` + ); - styles = window.getComputedStyle(p); - assert.equal(styles.color, 'blue'); + assert.equal(window.getComputedStyle(p1).color, 'blue'); + assert.equal(window.getComputedStyle(p2).color, 'blue'); } }; diff --git a/test/runtime/samples/inline-style-directive-shorthand/main.svelte b/test/runtime/samples/inline-style-directive-shorthand/main.svelte index 65bbff910b..2b5f8e3db7 100644 --- a/test/runtime/samples/inline-style-directive-shorthand/main.svelte +++ b/test/runtime/samples/inline-style-directive-shorthand/main.svelte @@ -3,3 +3,7 @@

+ +{#each [1] as _} +

+{/each}