Glossary

...

Attribute

It's a notation inside the HTML tag that provides additional information about HTML element. For the names of the attributes, we will always use kebab-case to follow the standard.

Complex attribute

It's an attribute that represents an object or an array. In order to properly write them down, the regular double quotes (") can be written with simple ones (') an the value of the attribute needs to be in JSON format

Flag

It's an attribute that represents a boolean, but can only be set to true. It's considered false when the attribute is not present. A good example of this is checked in HTML <input> tags.

All these examples consider wide as true, so the wide variant will be applied:

<z-button wide />
<z-button wide="" />
<z-button wide="true" />
<z-button wide="false" />
<z-button wide="❌" />

If you're using a framework, make use that the type of the flag is true | undefined, since false will still set the attribute, and HTML will consider it as an active flag. You can set the fallback with an OR (||) in the assignation of the attribute or when you are assigning the bound variable.

An example for the three main frameworks:

<z-text-input [invalid]="isInvalid || undefined"/> <!-- Angular -->

<z-text-input .invalid="isInvalid || undefined"/> <!-- Vue -->

<z-text-input invalid={isInvalid || undefined}/> <!-- React -->

Property

It's the attribute but the JavaScript class instance. Setting the value of the attribute will change the property, but not the other way around. Acting on a component, like an <input>, changes the property, but not the attribute. The pseudo-classes of CSS will follow the property and not the attribute, and that's why it is important to keep internal consistency in the components.

Shadow DOM

Provides a way to attach a hidden, separate DOM to an element. This shadow DOM tree starts with a shadow root, under which any element can be attached. This encapsulation allows the styling and scripting of web components to be isolated from the rest of the document, preventing conflicts and ensuring encapsulation.

HTML Templates

(<template> and <slot> elements). The <template> tag is used to declare fragments of HTML that can be cloned and inserted in the document by script. <slot> elements are placeholders inside your component that can be filled with any markup fragment that the user of your component provides.

Custom Elements

This allows developers to define their own custom HTML elements along with their behavior.

WebComponent

Web Components are a set of web platform APIs that allow developers to create custom, reusable, encapsulated HTML tags for use in web pages and web applications. They are based on four main technologies: custom clements, shadow DOM, and HTML Templates

Web Components enable a modular approach to web development by allowing developers to create new elements that extend the HTML language itself, encapsulating the functionality and styling of these elements, and reusing them across different web applications.

Wrapper

They are re framework-specific components that wrap a WebComponent and eases the use of these, making them usable as a framework native component.

CSS Custom Property

CSS Custom Properties, commonly referred to as CSS variables or CSS Tokens, are entities defined by CSS authors that contain specific values to be reused throughout a document. They follow the syntax --name: value;, where --name represents the custom property name, and value is the value assigned to it.

These properties can be accessed using the var(--name) function in other CSS properties. CSS Custom Properties enable more flexible and dynamic styling by allowing values to be changed or updated in multiple places by altering a single definition. This feature significantly enhances the maintainability and scalability of CSS code.

Slot

...

Slotted configuration

...