Why "--" is not permitted in Lightning Component's comments in markup? How to toggle markup with class names like "uiInput--input"?

Question

In a Lightning Component, I have the following markup which I have to comment in and out for testing purpose

<force:inputField value="{!v.account.Name}" class="form-control uiInput--input input" />

now when I try to comment it out like this

<!--<force:inputField value="{!v.account.Name}" class="form-control uiInput--input input" />-->

the API tells me

markup://c:elfL1:6,81: ParseError at [row,col]:[7,81] Message: The string "--" is not permitted within comments.

Since I didn't figure out that fancy class name uiInput--input (Salesforce did so...) it would be nice to be able to toggle that om/off OR avoid to use class names like this...

Answer 1

The use of double dashes/hyphens inside comments is invalid in HTML, XML, and XHTML:

The Importance of Correct HTML Commenting

Lightning Component markup is XML, and the generated markup on the client is HTML. The Lightning markup might generate something such as:

<!-- <input class="my-invalid--class-name" value="Foo"/> -->

I do not know where the -- trend in style classes comes from, but clearly they weren't thinking about this clearly!

Answer 2

I don't think it would be anyone's ideal workaround, but if you really need SLDS class names in your lightning component, and you really need to comment out the tag where the class is being used, this works.

Replace at least one of the hyphens in the double hyphen grouping with either the Unicode or ASCII character codes (Unicode: - ASCII: -)

Example:

<!-- <input class="slds-button slds-button-&#45;neutral" value="Foo"/> -->

<input class="slds-button slds-button-&#45;neutral" value="Foo"/>

When uncommented, the character code is correctly parsed, and the class will be applied correctly.

Not pretty, but again, if you really need this capability, this will unblock you.

Answer 3

Seems that the latest version of the Lightning Design System no longer uses the -- variant (in most places).

Most if not all of the selectors that used -- have been replaced by _

See the updated grid documentation as an example

Answer 4

First I changed the markup to

<force:inputField value="{!v.account.Name}" class="form-control elfUiInput" />

which is toggelable...

then in the controller I tried this

init : function(component, event, helper) {
        console.log('elfL1.init()');
        var action2 = component.get("c.getAccount");        
        action2.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.account", response.getReturnValue());
            $('select.elfForceEditable').removeAttr('disabled');
            $('.elfUiInput').addClass('input');
            $('.elfUiInput').addClass("uiInput--input");
        $A.enqueueAction(action2);
}, 

which surprisingly does not work. First I blamed jQuery - but it's something else because this does work:

init : function(component, event, helper) {
        console.log('elfL1.init()');
        var action2 = component.get("c.getAccount");        
        action2.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.account", response.getReturnValue());
            $('select.elfForceEditable').removeAttr('disabled');
            $('.elfUiInput').addClass('input');
            // $('.elfUiInput').addClass("uiInput--input");
            window.setTimeout( function(){ $('.elfUiInput').addClass("uiInput--input"); },200 )
        });
        $A.enqueueAction(action2);
}, 

so I need a workaround for the workaround of the workaround... :-(

Answer 5

Not allowed because "--" IS already somewhere in your code

For Example

<a href="javascript:void(0);" class="slds-th__action slds-text-link--reset">

Replace with (remove link--reset replace linkreset)

<!--<a href="javascript:void(0);" class="slds-th__action slds-text-linkreset">-->

Thanks