fix: special-case width/height attribute during spread

fixes #6752
pull/8412/head
Simon Holthausen 4 years ago
parent aa4d0fc264
commit dc7fc9140f

@ -302,6 +302,15 @@ export function attr(node: Element, attribute: string, value?: string) {
else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value); else if (node.getAttribute(attribute) !== value) node.setAttribute(attribute, value);
} }
/**
* List of attributes that should always be set through the attr method,
* because updating them through the property setter doesn't work reliably.
* In the example of `width`/`height`, the problem is that the setter only
* accepts numeric values, but the attribute can also be set to a string like `50%`.
* If this list becomes too big, rethink this approach.
*/
const always_set_through_attr = ['width', 'height'];
export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) { export function set_attributes(node: Element & ElementCSSInlineStyle, attributes: { [x: string]: string }) {
// @ts-ignore // @ts-ignore
const descriptors = Object.getOwnPropertyDescriptors(node.__proto__); const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@ -312,7 +321,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
node.style.cssText = attributes[key]; node.style.cssText = attributes[key];
} else if (key === '__value') { } else if (key === '__value') {
(node as any).value = node[key] = attributes[key]; (node as any).value = node[key] = attributes[key];
} else if (descriptors[key] && descriptors[key].set) { } else if (descriptors[key] && descriptors[key].set && always_set_through_attr.indexOf(key) === -1) {
node[key] = attributes[key]; node[key] = attributes[key];
} else { } else {
attr(node, key, attributes[key]); attr(node, key, attributes[key]);

@ -0,0 +1,4 @@
export default {
// https://github.com/sveltejs/svelte/issues/6752
html: `<img height="100%" width="100%" alt="" />`
};

@ -0,0 +1 @@
<img height="100%" width="100%" alt="" {...$$restProps} />
Loading…
Cancel
Save