[SalesForce] Lightning Component Styling on UI Components

My experience has been that you would use the custom attribute approach if you wanted to expose the value to be set externally by the container (an app, another component, etc.) of your component. One benefit of that would be that the container could "share" the value across multiple contained components if need be like in this question. You can also do fun things like set the value through an URL parameter.

The value attribute that you can get from the ui:inputText (v.value) is itself an attribute of the abstract ui:input component and already exists to hold the value, so if you have no need to expose it as part of the component's shape / API, then you shouldn't.

Bonus Answer

I have no insight into the roadmap or anything like that (maybe someone from Salesforce will answer), but I tweeted the same general question about LDS, the sldsx components, and the ui:inputs. You can see it in this conversation, but the telling part to me is that the Salesforce1 Style Guide that used to thoroughly list all of the Salesforce1 styles with an URL of http://sfdc-styleguide.herokuapp.com now redirects to https://www.lightningdesignsystem.com/ .

It looks like http://documentation.auraframework.org/auradocs#reference?descriptor=ui:inputCheckbox&defType=component , has an attribute called "domId" which sounds like what we want, unfortunately when trying to use it I get [ERROR]: No ATTRIBUTE named domId found: Source .

However, this attribute is not listed in the ui:inputCheckbox docs located at /auradocs . I guess because it hasn't made it over quite yet.

I'm not sure what ui:inputCheckbox really buys us in this situation, as we aren't using the div and label wrappers the component generates (it only seems to do that when we specify a label attribute, which we don't want to do since we want the slds classes and layout).

Something like this seems to work for right now:

<label for="{!contact.Id}" class="slds-checkbox"> <input type="checkbox" id="{!contact.Id}" onchange="{!c.checkboxChange}"/> <span class="slds-checkbox--faux"></span> <span class="slds-form-element__label">{!contact.Name}</span> </label>

({checkboxChange: function(component, event, helper){ console.log(event.target.id); })

Problems with this approach:

1) There can be id collisions. A temporary workaround could be adding a namespace to the id.

2) There could also be more built into the ui:inputCheckbox change event than the html5 change event, but the html5 change event seems pretty robust: https://developer.mozilla.org/en-US/docs/Web/Events/change .

Long term, I bet this is problem could be solved by the domId attribute.