Dynamically Added Elements

[svanetten1976]

Hi Tom,
First off, this is a very cool and useful plugin that you have authored here. In trying to integrate EQCSS with a large-scale application I am working on, I found one issue that I am hoping there is a work-around for. The styles and queries all work correctly for static HTML elements, but there is some definite bugginess when working with dynamically added elements. More specifically, I am working on a ReactJS project in which the user can dynamically add new HTML 'tiles' to a dashboard screen. Because the tiles are added dynamically, I get repeated occurrences of attributes like 'data-eqcss-0-1' and 'data-eqcss-0-2' etc. and then those styles are doubled up on those newly added elements.
So basically, what I am asking is if there is a method to re-initialize EQCSS every time new HTML is added. I've tried using EQCSS.apply() and EQCSS.throttle() to no avail. Any ideas? I'm really hoping that I can use this promising library -- Steve

[Tommy Hodgins]

Hey @svanetten1976! Thanks for your interest and checking it out. The methods you're able to work with are:

• EQCSS.load() for loading new styles
• EQCSS.parse() for parsing the loaded styles
• EQCSS.apply() to recalculate parsed styles immediately
• EQCSS.throttle() to queue a request to recalculate parsed styles no more frequently than every 200ms

I've tried creating a test case here - a <div> that is either prepended or appended with a child element. I see problems with EQCSS not applying if I remove EQCSS.apply() from this code, but with this code here it seems to work:

<div id=pile></div>

<script>
  setInterval(function(){
    var tag = document.querySelector('#pile')

    // 50/50 add to top or bottom
    if (Math.random() < .5) {
      tag.innerHTML = '<div>New Example</div>' + tag.innerHTML
    } else {
      tag.innerHTML += '<div>New Example</div>'
    }
    EQCSS.apply()
  }, 1000)
</script>

<style>
  #pile {
    margin: 1em 0;
    border: 1px solid black;
  }
  div {
    background: red;
  }
  @element 'div' {
    $this {
      background: lime;
    }
  }
</style>

<script src=http://elementqueries.com/EQCSS.js></script>

Are you able to provide a test case of the problem you're seeing with React so I can reproduce what you're looking at and poke around a little bit? Also feel free to hop into the EQCSS chat on Gitter - we have other users using React with EQCSS who have had success so they may be able to explain things from a perspective I don't have :D The link to that is https://gitter.im/eqcss/eqcss

[svanetten1976]

Hi Tom, thank you for the ultra quick reply! Actually I was just about to go delete this ticket, because it actually had to do with the way I was handling something else. The problem has nothing to do with your library. Sorry to bother you and thanks for this incredible and promising library! This could really be a game changer! Thank you! -- Steve