attr

The attr directive allows you to set an attribute on the DOM element based on TRUTHY or FALSY value.

It uses the dot notation to separate the attribute name and the value and its value can have two parts depending on the attribute you are setting;

There are 4 special attributes with special handling: class, style, data and boolean attributes. Everything else will follow the following format:

attr.[attribute-name]="[attribute value], [condition]"

Note: The [attribute value] must contain data binding curly braces for data binding but for the [condition] the curly braces are not necessary.

Boolean Attributes

There are certain attributes in HTML that are considered to be boolean attributes. They do not require a value, but if you set them to true, they will be set to the attribute name.

The below example will only set the disabled attribute on the button if the disabled property is truthy.

class ActionButton extends WebComponent {
	static observedAttributes = ['disabled', 'type'];
	
	get template() {
		return `
			<button type="{type}" attr.disabled="disabled"></button>
		`
	}
}

ActionButton.register();

Note: CWCO automatically converts native boolean attributes to BOOLEAN values properties.

Style Attribute

There are two ways you can use the attr directive to set style attributes. You can use it for a specific style property...

<button attr.style.font-weigth="bold, subType === 'primary'"></button>

with the format of: attr.style.[property-name]="[value], [condition]"

...or you can use it to set a style CSS string;

<button attr.style="background: orange; color: black;, subType === 'cta'"></button>

with the format of: attr.style="[CSS string], [condition]"

Class Attribute

The attr directive can also be used to set class attributes, and it follows the same concept as the style attribute.

You can use it for a specific class...

<button attr.class.primary="subType === 'primary'"></button>

with the format of: attr.class.[class-name]="[condition]"

...or you can use it to set a class string;

<button attr.class="primary-{subType}, subType === 'cta'"></button>

with the format of: attr.class="[class-string], [condition]"

Data Attribute

The data attribute is another special attribute that only follows a single format:

You can only use it for a specific data name

<button attr.data.special-button="{subType}, subType !== 'default'"></button>

with the format of: attr.data.[data-name]="[value], [condition]"