customCSS

A Web Component is a Custom Element, which for HTML standards means that while its behavior and display on the screen are defined by the component’s own JavaScript code, from the browser’s standpoint, it is another element and therefore has all the properties of any HTML element, including CSS for itself and its descendant elements.

WCF’s Web Components adhere to the following criteria regarding CSS styles:

• They load a reset stylesheet from a file named reset.css
• Styles are located in a style tag, which is a direct child of the component.
• The component element itself has no styles, except for an inline style that removes the outline, only when it contains form fields.
• Each element has a specific class that provides the corresponding styles.
• Among its classes, each element has one class with a name equal to the data-wcfid value, but there is no declaration for that class in the style tag. It is empty, and the goal is to make it very easy to add new styles through customCSS.

CustomCSS is a set of declarations added to the component after the component’s native styles, and therefore have precedence and override the values that the component may have.

This way, styles can be modified according to specific needs, and these modifications become part of the component itself without the need to alter or modify the original code.

customCSS in the editor and as a URL

The WCF factory interface allows editing customCSS directly from a small editor. The editor is very simple, and it is designed to add a small amount of declarations thar are sufficient when minor adjustments are required.

In addition to the editor, customCSS can be added by providing a URL. The factory takes the URL’s content and adds it “as is” to the component’s CSS styles. The idea behind it is that whoever loads the CSS styles should use their regular tools to generate CSS and incorporate the component’s styles this way.

Once the declarations are incorporated through the customCSS URL, there is no other link between WCF or the component and the URL or its content. The component will never have access to that URL, it will not even be saved in its code. Regardless of the content undergoing changes or if the URL becomes invalid; the incorporated customCSS will remain unchanged.

If customCSS is generated both through the editor and the URL, the code from the editor is added first, followed by the code from the URL.