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);
}
/**
* 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 }) {
// @ts-ignore
const descriptors = Object.getOwnPropertyDescriptors(node.__proto__);
@ -312,7 +321,7 @@ export function set_attributes(node: Element & ElementCSSInlineStyle, attributes
node.style.cssText = attributes[key];
} else if (key === '__value') {
(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];
} else {
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