Attributes

Components created by Web Component Factory are designed to provide simple and sophisticated handling through the inclusion of attributes.

Features like customization of texts, images, and links, customization through variants, and changes to the component via switches, are all handled by adding, modifying, and removing attributes.

Not only the component tag use attributes to facilitate its handling, but also the component’s descendant elements have attributes that allow them to be recognized and modified as needed.

The WCF API enables the same functionality for any user attribute that you wish to add.

Attributes that work as parameters

When a component is created with Web Component Factory, an attribute is created for each text, link, or image, allowing it to be modified at runtime.

If no attribute value is specified, the component’s original values become default for the attributes. If a value is specified, this value will replace the original as expected.

For example, shown below, there is an action-button component, to which a text parameter was foreseen to modify the text, with a default value of Text Action. Therefore, the tag without parameters generates the default button:

<comp-action-button id="comp-action-button"
></comp-action-button>

On the other hand, the following example shows how using the text attribute can modify the component’s content.

<comp-action-button id="comp-action-button"
   text="Next"
></comp-action-button>

When a component is downloaded from WCF, an example of HTML code is included within the Zip file, including all component attributes working as parameters and their default values. Here is the example included in the Zip file corresponding to the action-button component seen above:

<comp-action-button id="comp-action-button"
	text="Text action"
	vector_arrowforward="./comps/img/vectors7221810.svg"
></comp-action-button>

Attributes for links

If a component includes a link (HTML a tag), 2 attributes will be generated: one for the link text and another for the link destination.

The attribute for the link destination has the singularity that if a string corresponding to the name of a valid function is assigned to it, the link will run said function when clicked. The function will receive the link clicked as a parameter.

In the following example, clicking the link will cause the browser to load the page https://wcf.tools

<comp-mi-enlace id="comp-mi-enlace"
	a_texto_de_enlace="Enlace a un sitio"
	a_texto_de_enlace_href="https://wcf.tools"
></comp-mi-enlace>

This is what the component should look like, please try and click it:

In the following example, clicking the link will run the funcExample function.

<script>
	function funcEjemplo(instance) {
		console.log(instance);
		alert("soy una funcion");
	}
</script>

<comp-mi-enlace id="comp-mi-enlace"
	a_texto_de_enlace="Enlace a una función"
	a_texto_de_enlace_href="funcEjemplo"
></comp-mi-enlace>

Now the component looks like this. Try and click this one as well.

Unlike typical callback type functions in JavaScript, in this case, it is required to pass the name function as a string (in quotes/quotation marks).

Predefined attributes

data-wcfid

A component can be used many times on the same page, implying that if every element has an id attribute, they will be repeated the same number of times, breaking up with the criterion that an id must necessarily be unique within the entire document.

To solve this inconvenience, WCF adds a data-wcfid[1] attribute that identifies each element within a component.

For the case of repeated names, an ordinal number is added automatically, for instance: button, button_1, button_2 and so forth.

You can easily access elements within a component instance using the getInstanceElemByWcfid function.

The data-wcfid attribute is created based on the data provided by the source according to the following criteria:

Figma

In the case of Figma the wcfid takes the name of the element (shown in the left column of the interface). Spaces are filled with hyphens, and accented characters are switched to their correspondents without an accent.

It is important to highlight that if the name of a text element does not change, Figma assigns the content text as the name of the element, which generates very large identifiers and countless “Lorem ipsum dolor sit amet…”.

HTML

In the case of HTML, the wcfid is taken from the following attributes in this order:

1. id: id attribute value, if it exits
2. name: value of the name attribute, if it exists and there is no id.
3. data-name: since only form elements have the name attribute, the use of the data-name attribute is foreseen.
4. tagName: the element’s tagName property (div, p, img, etc.)
5. If none of the above existe, the data-wcfid attribute will be node_name.

Reserved words

In the event of a name resulting in a JavaScript reserved word, such as default, class or continue, for instance, the component generator will add the prefix my to the attribute.

no-subcomps

A very common problem when handling components is that, during their creation, subcomponents are included and that, afterward, in production they are meant to disappear.

One solution to this problem could be to create them and once they are done, delete the subcomponents to generate the production version. But this is terribly impractical, especially because, during deployment and the following maintenance, this procedure would have to be repeated dozens of times.

To solve this problem, the no-subcomps attribute was added, which when set to true, makes all subcomponents of a component disappear. This way, a component with placeholder subcomponents can be easily created and removed in production by adding the no-subcomps attribute.

variant

Web Component Factory allows the creation of components that unfold into variants, that is, that change CSS properties and dynamically add or remove elements. A multiple variant component is called a set because it could be conceived as a set of different components.

The variant attribute applied to the component tag changes the variant.

The variant accepts numeric values only. If the attribute is not present, it is empty or null, the component will select the default variant.

Attributes and switches

A switch is an attribute that allows modifying an element within a component. This includes showing, hiding or modifying it in any way the CSS allows.

Every switch has a name, and that will be the name of the attribute to use. Each switch accepts two values:

• on: it shows the element without modifications
• off: it removes the element (and the elements that make up the element’s children list) by adding a class that includes only display: off;

Any other value assigned to the switch will add a class to the switched element with that value, so if the class exists because it was added as customCSS, then the element will take the CSS values that the class includes.

You can learn more about Switches and customCSS in the specific notes.

_____________________

[1] According to the standard defining HTML 5, user attributes must always begin with the data- prefix.