customCSS

Un Web Component es un Custom Element lo que para el estándar HTML implica que si bien su comportamiento y despliegue en pantalla es definido por el código JavaScript del propio componente, desde el punto de vista del navegador es un elemento más, y tiene por tanto todas las propiedades de cualquier elemento HTML, lo que incluye el CSS para sí y para los elementos descendientes.

Los Web Components de WCF siguen el siguiente criterio con respecto a los estilos CSS:

• Cargan una hoja de reset, desde un archivo llamado reset.css.
• Los estilos están en un tag style, que es hijo directo del componente.
• El elemento del componente propiamente dicho no tiene estilos, con excepción de un estilo inline que le quita el outline, solo cuando contiene campos de formulario.
• Cada elemento tiene una clase específica, que le da los estilos correspondientes.
• Cada elemento tiene entre sus clases una con el nombre igual al valor de data-wcfid, pero no hay en el tag style una declaración para esa clase. Está vacía y el objetivo es que sea muy fácil agregar nuevos estilos a través de customCSS.

El customCSS es un conjunto de declaraciones que se añaden al componente, después de los estilos nativos del propio componente y por lo tanto “pisan” los valores que pueda tener el componente.

De esta forma se puede modificar los estilos según las necesidades particulares, y que estas modificaciones pasen a formar parte del propio componente, sin necesidad de alterar o modificar el código original.

customCSS en el editor y como URL

La interfaz de la fábrica de WCF permite editar el customCSS directamente en un pequeño editor. El editor es muy sencillo y está pensado para agregar pequeñas declaraciones que sean suficientes cuando lo que se requiere son cambios menores.

Además del editor, se puede agregar customCSS proporcionando una URL. La fábrica toma el contenido de la URL y lo agrega tal como viene al CSS del componente. La idea es que quien carga el CSS pueda utilizar sus herramientas habituales para generar CSS, y las incorpore de esta forma los estilos del componente.

Una vez incorporadas las declaraciones a través de la URL de customCSS, no hay ningún otro vínculo de WCF ni del componente con la URL ni con el código que contiene. El componente jamás accederá a esa URL, ni siquiera está almacenada en su código. No importa que su contenido cambie o que la URL deje de ser válida, el customCSS incorporado permanecerá inalterado.

En el caso de que se genere customCSS tanto a través del editor como de la URL, primero se agrega el código que viene del editor, y luego el de la URL.