Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:angular-atributos-componentes [2026/10/24 23:40] – La clase CSS del botón es c-boton también antes de los modificadores BEM claude
+++ clase:daw:diw:angular-atributos-componentes [2026/10/24 23:42] (actual) – Modificadores del botón con BEM desde el principio (c-boton--funcion-*); la sección del choque de nombres pasa a una nota claude
@@ Línea 88: / Línea 88: @@
   readonly funcion = input<'normal' | 'alternativa' | 'peligrosa'>('normal');
-  clases = computed(() => `c-boton funcion--${this.funcion()}`);
+  clases = computed(() => `c-boton c-boton--funcion-${this.funcion()}`);
 }
 </sxh>
@@ Línea 104: / Línea 104: @@
 <sxh html>
-<a class="destacado c-boton funcion--normal">Hola mundo</a>
+<a class="destacado c-boton c-boton--funcion-normal">Hola mundo</a>
 </sxh>
@@ Línea 125: / Línea 125: @@
   readonly funcion = input<'normal' | 'alternativa' | 'peligrosa'>('normal');
-  clases = computed(() => `c-boton funcion--${this.funcion()}`);
+  clases = computed(() => `c-boton c-boton--funcion-${this.funcion()}`);
 }
 </sxh>
@@ Línea 136: / Línea 136: @@
 ¿Por qué es importante ahora esta propiedad y por qué la hemos cambiado a ''ViewEncapsulation.None''?
-Con ''ViewEncapsulation.Emulated'' (o ''ShadowDom'') los estilos solo llegan a los tags de dentro de ''template'' y, escribiéndolos con el selector ''<nowiki>:host(.funcion--peligrosa)</nowiki>'', al propio **Host**. Se podría hacer así, pero hacemos los estilos públicos con ''ViewEncapsulation.None'' porque es lo que hace Angular Material con sus botones y porque así las clases del botón son CSS normal, el mismo que escribimos fuera de Angular.
+Con ''ViewEncapsulation.Emulated'' (o ''ShadowDom'') los estilos solo llegan a los tags de dentro de ''template'' y, escribiéndolos con el selector ''<nowiki>:host(.c-boton--funcion-peligrosa)</nowiki>'', al propio **Host**. Se podría hacer así, pero hacemos los estilos públicos con ''ViewEncapsulation.None'' porque es lo que hace Angular Material con sus botones y porque así las clases del botón son CSS normal, el mismo que escribimos fuera de Angular.
-Vale, pero ahora tenemos un problema. Tenemos las clases CSS ''funcion--normal'' tanto en ''<nowiki><boton></nowiki>'' como en ''<nowiki><panel></nowiki>''. Y son distintos.
+<note important>
-Por lo tanto debemos cambiar los estilos de los componentes para que no //choquen// entre los distintos componentes.
+Con ''ViewEncapsulation.None'' los estilos del botón llegan a toda la aplicación, así que sus clases tienen que seguir [[clase:daw:diw:sistema-diseno-bem|BEM]]: ''c-boton'' y ''c-boton--funcion-normal''. Si el botón y el panel tuvieran los dos una clase ''funcion--normal'', una pisaría a la otra.
+</note>
-Para evitar que choquen los nombres de los estilos CSS entre los distintos componentes se usan las nomenclaturas de:
+Los estilos del botón quedan así:
-  * [[https://getbem.com/|BEM]]
-  * [[https://suitcss.github.io/|SUIT CSS]]
-En el tema [[clase:daw:diw:sistema-diseno-bem|Sistema de diseño: BEM]] se explica BEM.
-Pero los estilos ahora quedan de la siguiente forma:
 <sxh css;title:boton.scss>
@@ Línea 188: / Línea 183: @@
 </sxh>
-Y el código queda finalmente así:
-<sxh ts;title:boton.ts; highlight: [15]>
-import { Component, ViewEncapsulation, computed, input } from '@angular/core';
-@Component({
-  selector: 'button[boton], a[boton]',
-  template: '<ng-content></ng-content>',
-  styleUrl: './boton.scss',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    '[class]': 'clases()'
-  }
-})
-export class Boton {
-  readonly funcion = input<'normal' | 'alternativa' | 'peligrosa'>('normal');
-  clases = computed(() => `c-boton c-boton--funcion-${this.funcion()}`);
-}
-</sxh>