Conditional attributes?

[bestguy]

Porting some Ractive code to Svelte, and am not sure how/if conditional attributes are supported:

<div {{#if id}}id="{{id}}" {{/if}} {{#if yadda}}title="{{yadda}}" {{/if}}>...</div>

shows:

Module build failed: Error: Expected >

Is this possible to support? My example above is simplified, so always outputting an attribute with blank string is not a good solution for me.

[andymans]

I believe that 'inside' an html tag you just use pure javascript expressions in braces. The 'if/else' blocks are used outside tags. Your example should work if you express it like:

<div id={{id?id:''}} title={{yadda?yadda:''}}></div>

You can use the same approach for class, style etc.

[bestguy]

Thanks, so it sounds like I'd have to show attributes even if they should have no value - not perfect imho but I can try working with this.

[ccampbell]

I just ran into this same issue. Would be nice if this was mentioned in the documentation

Failing demo: https://svelte.technology/repl/?version=1.6.8&gist=a5d5ae5aa325361147f0f67df791d863

Working demo: https://svelte.technology/repl/?version=1.6.8&gist=87cd0a97be31ac714596a07cffbffa7d

[plumpNation]

I am trying to use a conditional aria-describedby attribute. It is not valid to set it to an empty string and one does not always require an additional description for a modal.

[dschulten]

@plumpNation currently that is not possible, as @Rich-Harris confirmed in https://stackoverflow.com/questions/45714809/sveltejs-render-html-attribute-conditionally. Please raise an issue if your use case is not theoretical.

[kikonen]

Sorry for pinging in here, but is it now so that it's not possible to avoid rendering attributes without value. My need is to conditionally render "id" and "name" attributes, only if there is actually value.. And I obviously don't want to render them if there is no value. And value depends from the inputs, and is thus it's not up to widget to decide.

So HTML spec says: "When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element's tree and must contain at least one character. The value must not contain any ASCII whitespace.".

Thus rendering empty value is not ok, and duplicate neither. Thus now if I can't skip rendering of missing "id" attribute, I've to generate some unique value for it if there is not one provided by widget user.

[Conduitry]

As of version 3.5.2 and #3013, attributes that are set to null or undefined won't be added to the tag.

[GeorgeTailor]

What about boolean attributes? HTML spec says:

    2.5.2 Boolean attributes

    A number of attributes are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

    If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

    The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

So all of the below should be valid:

<textarea readonly></textarea>
<textarea readonly=""></textarea>
<textarea readonly="readonly"></textarea>

[rodgco]

One way to solve this issue is to use the spread operator (...), build attributes in an object the way you want and "spread" it into the element.

REPL