Conditional Attributes

Markup does not allow you to use template literal value to define attributes directly on the tag.

const disabledAttr = "disabled=''";

// will not render the disabled attribute
html`<button ${disabledAttr}>click me</button>`;
// renders <button>click me</button>

There is a different way to go about conditionally set attributes.

Boolean attributes

By default, Markup handles all boolean attributes based on value.

const disabled = true;

html`<button disabled="${disabled}">click me</button>`;

Boolean attributes values in native HTML does not matter in whether the attribute should have an effect or be included. In Markup, if you set boolean attribute values to FALSY it will not be included.

The boolean attribute pattern is simply: NAME="CONDITION".

html`<input type="checkbox" checked="true"/>`;

You may directly set the value as true or false string or inject a variable.

const checked = false;

html`<input type="checkbox" checked="${checked}"/>`;

The class attribute

The class attribute has a special handle that allows you to dynamically target single classes to be conditionally set.

The class attribute pattern can be a key-value type class="CLASS_STRING | CONDITION" or a specific class class.NAME="CONDITION".

html`<button class="disabled btn | true">click me</button>`;
// renders: <button class="disabled btn">click me</button>

const primary = true;
html`<button class="btn" class.primary="${primary}">click me</button>
`;// renders: <button class="primary btn">click me</button>

The style attribute

The style attribute also have a special handling that allows you to target specific CSS properties and set their values dynamically.

The style attribute pattern can be a key-value type style="CSS_STRING | CONDITION" or a specific style property style.CSS_PROPERTY="CSS_VALUE | CONDITION"

html`<button style="opacity: 0.5; | true">click me</button>`;
// renders: <button style="opacity: 0.5;">click me</button>

const primary = true;
html`<button style.color="orange | ${primary}">click me</button>
`;// renders: <button style="color: orange">click me</button>

The data attribute

Data attributes follow the pattern: data.NAME="VALUE | CONDITION" and can also be data.NAME="CONDITION" if value is same as the condition value. The template will evaluate if the value is truthy or falsy to decide whether the attribute should be set.

const loading = true;

html`<button data.loading="${loading}" data.btn="true">click me</button>`

Other attributes

For any other attribute you will need to either prefix the attribute with attr. or |(pipe) the value to a condition.

These follow the pattern: NAME="VALUE | CONDITION" or attr.NAME="VALUE_SAME_AS_CONDITION". The template will evaluate if the condition is truthy or falsy to decide whether the attribute should be set.

const label = "action button";

// will not render if label is an empty string
html`<button attr.aria-label="${label}" formenctype="multipart/form-data | ${isFormData}">click me</button>`