simple property assignment fails to set img width
See original GitHub issueI’m facing some incompatibility when replacing react with preact. It seems the way preact sets attributes (https://github.com/developit/preact/blob/master/src/dom/index.js#L68 - simply by setting a property) is not safe.
My use case is a simple img
component that receives width
and breaks with the value of 100%
because of the the following:
const img = document.createElement('img');
img.width = '100%';
console.log(img.width); // 0
And what I think should be done (this is what react does)
const img = document.createElement('img');
img.setAttribute('width', '100%');
console.log(img.width); // expected value (automagically defined by the browser)
Unfortunately, changing setProperty
to
function setProperty(node, name, value) {
try {
node.setAttribute(name, value);
} catch (e) { }
}
isn’t enough… I think we might have to do some checks before knowing which kind of property setting we should do (simple assignment or setAttribute
)… Any thoughts?
Issue Analytics
- State:
- Created 7 years ago
- Comments:23 (13 by maintainers)
Top Results From Across the Web
simple property assignment fails to set img width #492 - GitHub
I'm facing some incompatibility when replacing react with preact. It seems the way preact sets attributes ...
Read more >self.image.frame.width = 20 give get only property error
get-only means you can only read this property (for example to compare with something), but not change. To set width you need this:...
Read more >How to fix explicit width & height error in Next.js v10 Image ...
The image component of Nextjs v10 doesn't respect any height, width, maxwidth, maxheight styles. When using Nextjs image component without ...
Read more >How to set the width and height of an image using HTML
Example 2: In this example, we will not assign width and height value so the image will display with its original height and...
Read more >HTML DOM Image width Property - W3Schools
Definition and Usage. The width property sets or returns the value of the width attribute of an image. The width attribute specifies the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It’s an open bug, typically open bugs represent broken promises.
@enapupe I’m open to the test idea - it was also proposed in #242.
Regarding the
String
suggestion - the reason this is useful is because Preact cannot support property whitelists given the filesize constraints we have placed on the library. Instead, we need to look for other ways to implement conditions - if theString
type of a value can be used to fix this bug without causing a performance degradation for other String props, that’s probably what will end up being used since it’s only a couple of bytes (and thus much smaller than a whitelist).It’s also worth noting that I think this issue would apply more broadly to other DOM properties.
height
is the obvious one, but there are others - for examplelist
andtype
are already blacklisted for similar reasons. Maybe our solution to this issue will enable us to remove those specific blacklists and reduce the bundle size 😃