diff --git a/src/compiler/compile/render_dom/wrappers/Element/index.ts b/src/compiler/compile/render_dom/wrappers/Element/index.ts index 5145db9fef..8114c898f8 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/index.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/index.ts @@ -750,7 +750,7 @@ export default class ElementWrapper extends Wrapper { } }); - if (this.node.attributes.some(attr => attr.is_spread)) { + if (this.node.attributes.some(attr => attr.is_spread) || this.node.is_dynamic_element) { this.add_spread_attributes(block); return; } diff --git a/test/runtime/samples/dynamic-element-attribute-boolean/_config.js b/test/runtime/samples/dynamic-element-attribute-boolean/_config.js new file mode 100644 index 0000000000..a28a33b942 --- /dev/null +++ b/test/runtime/samples/dynamic-element-attribute-boolean/_config.js @@ -0,0 +1,15 @@ +export default { + props: { + disabled: false + }, + html: '', + + test({ assert, component, target }) { + const button = target.querySelector('button'); + assert.equal(button.disabled, false); + + component.disabled = true; + assert.htmlEqual(target.innerHTML, ''); + assert.equal(button.disabled, true); + } +}; diff --git a/test/runtime/samples/dynamic-element-attribute-boolean/main.svelte b/test/runtime/samples/dynamic-element-attribute-boolean/main.svelte new file mode 100644 index 0000000000..0166d378eb --- /dev/null +++ b/test/runtime/samples/dynamic-element-attribute-boolean/main.svelte @@ -0,0 +1,5 @@ + + +Click me diff --git a/test/runtime/samples/dynamic-element-attribute-spread/_config.js b/test/runtime/samples/dynamic-element-attribute-spread/_config.js new file mode 100644 index 0000000000..d4d64b27b7 --- /dev/null +++ b/test/runtime/samples/dynamic-element-attribute-spread/_config.js @@ -0,0 +1,23 @@ +export default { + props: { + props: { + disabled: true, + type: 'button', + 'data-named': 'foo' + } + }, + html: '', + + test({ assert, component, target }) { + const button = target.querySelector('button'); + assert.equal(button.disabled, true); + assert.equal(button.type, 'button'); + assert.equal(button.dataset.named, 'foo'); + + component.props = { type: 'submit' }; + assert.htmlEqual(target.innerHTML, ''); + assert.equal(button.disabled, false); + assert.equal(button.type, 'submit'); + assert.equal(button.dataset.named, undefined); + } +}; diff --git a/test/runtime/samples/dynamic-element-attribute-spread/main.svelte b/test/runtime/samples/dynamic-element-attribute-spread/main.svelte new file mode 100644 index 0000000000..f400218bd7 --- /dev/null +++ b/test/runtime/samples/dynamic-element-attribute-spread/main.svelte @@ -0,0 +1,9 @@ + + +Click me