Directives

Directives are HTML attributes not specific to any tag. They are global logic attributes.

The idea of a directive is already built-in into HTML. They are known as global attributes. For example, the attributes draggable and contenteditable are directives.

1. They can be placed in any HTML tag;
2. They give HTML tags special capabilities;

The idea is same here and with CWCO you have a few special built-in ones, and you can also create a custom one for your needs.

if

The if directive will simply add or remove a node element from the DOM based on the truthiness of the value.

One important thing to know about the if directive is that the element is always the same instance, and it simply puts or remove it from the DOM based on the value being TRUTHY or FALSY.

Below example is an input field that will only add the label and error span tags to the DOM once their values are TRUTHY.

class InputField extends WebComponent {
	static observedAttributes = [
		'label',
		'value',
		'name',
		'type',
		'error-message'
	];
	
	get template() {
		return `
			<label class="input-field">
				<span if="label">{label}</span>
				<input type="{type}" name="{name}" value="{value}">
				<span if="errorMessage">{errorMessage}</span>
			</label>
		`
	}
}

InputField.register();

Note: Directive attribute values may or may not be wrapped in curly braces. This is a characteristics only for directive attributes. This also may change per attribute value pattern.