30 ms·

react passes everything as attributes for some reason which is the cause of the issue. I personally don’t understand why this hasn’t been fixed. Preact has mana

by teg4n_ 3y ago

react passes everything as attributes for some reason which is the cause of the issue. I personally don’t understand why this hasn’t been fixed. Preact has managed to support properties which makes web components work as expected, you’d think it would be fairly easy for React as well.

troupo 3y ago
> react passes everything as attributes for some reason Because that was their design choice: if you write attributes you pass them as attributes to the components > I personally don’t understand why this hasn’t been fixed. Because React is very popular and it's used everywhere in Facebook. You can't just change the behaviour without breaing a lot of stuff > Preact has managed to support properties > it would be fairly easy for React as well. Yup, they should "just" do it. Meanwhile, here's an overview of what's needed for that support: https://github.com/facebook/react/issues/11347 https://github.com/facebook/react/issues/11347 Preact uses Option 2 in the list. Other libraries go for either Option 1 or Option 3. React is going with option 2 in an experimental branch.
- e12e 3y ago
  Thank you. For others that are still confused (why would you care about attributes anyway?!) - I found this enlightening (and a little sad wrt how convoluted Dom/browsers still are): https://javascript.info/dom-attributes-and-properties https://javascript.info/dom-attributes-and-properties In particular: > So, if an attribute is non-standard, there won’t be a DOM-property for it. Is there a way to access such attributes? > Sure. All attributes are accessible by using the following methods: > elem.hasAttribute(name) – checks for existence. > elem.getAttribute(name) – gets the value. > elem.setAttribute(name, value) – sets the value. > elem.removeAttribute(name) – removes the attribute. > These methods operate exactly with what’s written in HTML.
  - troupo 3y ago
    And web components complicate this further because they can expose both attributes and properties, and have code that reacts to change in both (`attributeChangedCallback` is a lifecycle method).
claviska 3y ago
This has been fixed in a PR that made it into React’s experimental release. They’ve been promising support since 16, but keep bumping it back. It’s now slated for React 19. You can read the discussion here. [0] Per Dan’s comment [1], they began rolling out the flag to test support at Meta in February and, barring any major problems, they’re still targeting 19. 0: https://github.com/facebook/react/issues/11347 https://github.com/facebook/react/issues/11347 1: https://github.com/facebook/react/issues/11347#issuecomment-1438789227 https://github.com/facebook/react/issues/11347#issuecomment-...

by teg4n_ 3y ago

troupo 3y ago

> react passes everything as attributes for some reason Because that was their design choice: if you write attributes you pass them as attributes to the components > I personally don’t understand why this hasn’t been fixed. Because React is very popular and it's used everywhere in Facebook. You can't just change the behaviour without breaing a lot of stuff > Preact has managed to support properties > it would be fairly easy for React as well. Yup, they should "just" do it. Meanwhile, here's an overview of what's needed for that support: https://github.com/facebook/react/issues/11347 https://github.com/facebook/react/issues/11347 Preact uses Option 2 in the list. Other libraries go for either Option 1 or Option 3. React is going with option 2 in an experimental branch.

e12e 3y ago
Thank you. For others that are still confused (why would you care about attributes anyway?!) - I found this enlightening (and a little sad wrt how convoluted Dom/browsers still are): https://javascript.info/dom-attributes-and-properties https://javascript.info/dom-attributes-and-properties In particular: > So, if an attribute is non-standard, there won’t be a DOM-property for it. Is there a way to access such attributes? > Sure. All attributes are accessible by using the following methods: > elem.hasAttribute(name) – checks for existence. > elem.getAttribute(name) – gets the value. > elem.setAttribute(name, value) – sets the value. > elem.removeAttribute(name) – removes the attribute. > These methods operate exactly with what’s written in HTML.
- troupo 3y ago
  And web components complicate this further because they can expose both attributes and properties, and have code that reacts to change in both (`attributeChangedCallback` is a lifecycle method).

claviska 3y ago

This has been fixed in a PR that made it into React’s experimental release. They’ve been promising support since 16, but keep bumping it back. It’s now slated for React 19. You can read the discussion here. [0] Per Dan’s comment [1], they began rolling out the flag to test support at Meta in February and, barring any major problems, they’re still targeting 19. 0: https://github.com/facebook/react/issues/11347 https://github.com/facebook/react/issues/11347 1: https://github.com/facebook/react/issues/11347#issuecomment-1438789227 https://github.com/facebook/react/issues/11347#issuecomment-...