3

Minimal example under Lightning Locker:

StyleTest.app:

<aura:application >
    <p id="special">Look at me! I am so very special!</p>
    <ui:button label="Element.style.color = 'red'" press="{!c.handle1}" />
    <ui:button label="Element.style.setProperty('color', 'green')" press="{!c.handle2}" />
</aura:application>

StyleTestController.js:

({
    handle1 : function(c,e,h) {
        document.getElementById('special').style.color = 'red';
    },
    handle2 : function(c,e,h) {
        document.getElementById('special').style.setProperty('color', 'green');
    }
})

On API 37 with Lightning Locker enabled, both buttons try to set the same style property but only the second one succeeds. The first one silently fails. Now I realize it is not in general great practice to set inline styles using JavaScript when we can use classes instead, a lot of great plugins use these properties to dynamically style elements. For example the "qTip2" jQuery plugin runs into this issue: It is able to add classes and HTML attributes to the elements I select, but it is not successful at adding inline styles.

Given that setting .style.property fails but .style.setProperty() succeeds, can I gather that this is not intended behaviour?

3

Known issue in the queue - both syntaxes should be supported - will be fixed in Summer'16 but I am not sure exactly when yet.

  • Thanks Doug. I already have a ticket open for this one so if there is a bug# I can attach to it that'd be great. – Charles T Jun 14 '16 at 15:21
  • Case number 13993271 was opened last week for this. – Charles T Jun 14 '16 at 17:51
  • Perfect - the bug is W-3193414 – Doug Chasman Jun 14 '16 at 18:29
  • OK, added. My ticket was originally about qTip2 not working but clearly this issue is at least one root cause. When it is resolved I can go back and try various libraries again and report if any still don't work. – Charles T Jun 14 '16 at 18:34
  • 1
    Hi Doug, as of today I can confirm this is now working in my sandbox. Thanks. – Charles T Jun 22 '16 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.