title: CSS by data-attribute will not refresh/repaint
body: <p>In a HTML5/JS application we have a view with some styles depending on the <code>data-attribute</code> of  elements:</p>
  
  <p>like </p>
  
  <pre><code>&lt;li data-level="0"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;li data-level="1"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>li[data-level^="1"] {
    /* some styles */
  }
  </code></pre>
  
  <p>This seems to work just fine everywhere on <code>page reload</code>.</p>
  
  <p>But when the data-attribute get set programmatically via JS, the CSS properties get rendered in all relevant desktop browsers, but not in mobile safari.</p>
  
  <p>JS part looks like this:</p>
  
  <pre><code>this.$el.attr('data-level', this.model.getLevel())
  </code></pre>
  
  <p>Any ideas on how to force to apply those properties (refresh/repaint something) ?</p>
  
  <p>I would like to avoid using the class attribute and different classes as things are more complex than shown here... </p>