Customizing component's element using shorthand ::

I'm trying to customize a span by doing : span.siteNameError class=isError:error Whereas isError is a property in controller defined as:

export default E.Component.extend({ room: E.computed(function() {return this.get('store').createRecord('room');}), isError:false, });

I update this property in the same controller, based on the response of api as below:

E.$.ajax(${newApi}roomExists?name=${this.get('room').get('siteName')}).then( (data) => { if(data) { this.set('isError',data); } }, () => { this.set('isError', true); } );

But error class is always getting added to the span. Am I doing something wrong? Appreciate help on this!