question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow setting component properties through JS properties, not only setAttribute()

See original GitHub issue

The standard setAttribute() function on DOM elements is defined to accept a string for both the attribute name and value. A-Frame breaks this standard by allowing the value passed in to be an arbitrary object.

This could be brushed away as inconsequential, except Elm’s fantastic HTML library and virtual DOM expects attributes to be strings, and thus offers no way to take advantage of A-Frame’s more efficient object-passing approach.

Browsers provide another interface to set attributes: through JS properties. Mutating A-Frame components this way would change the interface from: entity.setAttribute('position', {x: 1, y: 2, z: 3})

to: entity.position = {x: 1, y: 2, z: 3}

Apart from it being more concise and maintaining consistency with regular HTML, adding such an interface would enable object assignment to be used in Elm, since Elm provides a means to specify DOM element properties.

This interface to set properties might also provide the opportunity to alleviate some of the overhead associated with the current setAttribute().

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
dkmg24commented, Sep 24, 2018

@ngokevin I’m also interested in why this wouldn’t be possible.

…we won’t be bending A-Frame to fit Elm or existing Web tools built for 2D Web.

Elm isn’t built for just the 2D web; there’s even a WebGL package for Elm.

Elm’s killer feature is its declarative app architecture which lets you map Model -> View without the usual mess of glue code. Elm’s declarative app architecture paired with A-Frame’s rock-solid VR and WebGL abstractions would be insanely cool. The cherry on top is that A-Frame is already declarative and DOM-based, which means Elm is tantalizingly close to working with A-Frame out of the box (and kind of did up to 412d162).

Their names even pun together 😉 It would be an absolute tragedy if Elm and A-Frame couldn’t play well together.

PS: Thanks for creating A-Frame. It’s awesome by itself!

3reactions
nmsmithcommented, Apr 4, 2018

If there’s a reason why this API is not reasonable, then that’s fine. But you don’t seemed to have justified why you couldn’t use properties.

On Wed, 4 Apr 2018 at 9:42 pm, Kevin Ngo notifications@github.com wrote:

Closed #3469 https://github.com/aframevr/aframe/issues/3469.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/aframevr/aframe/issues/3469#event-1556248595, or mute the thread https://github.com/notifications/unsubscribe-auth/AA3hJJIEoCC_vXCqUiU8zurifYPkUn5Eks5tlLGjgaJpZM4SuzNc .

Read more comments on GitHub >

github_iconTop Results From Across the Web

Element.setAttribute() - Web APIs | MDN
setAttribute() Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new ......
Read more >
Should I use setAttribute to add properties to an element?
It's as I thought. Using setAttribute is setting a HTML Attribute that is also reflected in the javascript object, but when NOT using...
Read more >
Attributes and properties
For instance, let's create a new property in document.body : ... input.value synchronizes only from attribute → property, but not back:.
Read more >
Knowledge: Attributes and properties
Set properties when working with JS; Set attributes when working with just HTML; Sync attribute changes to the corresponding JS property; Don't sync...
Read more >
Using Attributes and Properties in Custom Elements
Web Components will grow even more popular in the not too distant future ... setAttribute() and removeAttribute() , but these methods only ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found