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.

questions about setElementProp()

See original GitHub issue

I’ve been studying the source code closely, and have a few questions regarding setElementProp():

  1. How or why is it useful/relevant to set a single prop? Aren’t props always a set? If so, shouldn’t this be setElementProps() (plural) to avoid the loop and function-call overhead at every call site?

  2. Regarding setting of properties (not attributes), this line:

    try {
      element[name] = null == value ? "" : value
    } catch (_) {}
    

    Why the null (ish) check and defaulting to empty string? It’s not a given that the property being set is even a string property. It’s also not a given that I wouldn’t want to set a property to null. These are object-properties, but they seem to get treated like attribute-values?

    And why the catch? Capturing a stack-trace is expensive, isn’t it? Might be cleaner to check for existence with name in element prior to setting?

  3. Regarding the overall logic:

    try {
      element[name] = null == value ? "" : value
    } catch (_) {}
    
    if (typeof value !== "function") {
      if (null == value || false === value) {
        element.removeAttribute(name)
      } else {
        element.setAttribute(name, value === true ? "" : value)
      }
    }
    

    Aren’t we doing double duty here? First setting as property-value, then setting as attribute-value. If we had the property-check (above) we’d could make these mutually exclusive, so properties take precedence over attributes, and so we don’t do double assignments - probably more correct and better for performance?

For example, right now, if I do something like <div innerHTML={content}>, I will end up with the same HTML injected as an attribute-value.

Issue Analytics

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

github_iconTop GitHub Comments

1reaction
mindplay-dkcommented, Nov 22, 2017

I’ve opened a new issue for that discussion - I’m closing this one as there’s nothing actionable here.

0reactions
jorgebucarancommented, Nov 21, 2017

@mindplay-dk I am concerned that setting actual properties also randomly sets attributes - we’re littering the DOM with potential garbage…

What are some of those properties we are also setting as attributes, but we shouldn’t?

Read more comments on GitHub >

github_iconTop Results From Across the Web

renderer.setElementProperty is not working - Stack Overflow
Rendere2 uses setProperty instead of setElementProperty this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);.
Read more >
Using ChatGTP to answer Hype coding questions!
This thread is an instruction (experiment) to use ChatGTP to write (simple) code functions for Hype. To use this, register an account and ......
Read more >
Set value of a webform field programatically - Drupal Answers
If I look at the generated markup for each nodes form it see different values in the node_reference field, but when I submit...
Read more >
oncreate vs onupdate #82 - jorgebucaran/superfine - GitHub
I noticed that onupdate doesn't fire during the first update, is this intentional? I think, in most systems that offer both a create...
Read more >
Adding "alt" or "title" text to a Image from an ImageBundle
setElementProperty (clippedImage. ... Image img = imgBundle.aeromexico(). ... I hope this answers your questions and if you have any other problems let me ......
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