LegbaElement

Ce que ça fait

Classe de base de tout Web Component @legba-core/ui : une LitElement standard, sans comportement ajouté au-delà de sa feuille de styles de base. L’isolation Shadow DOM vient entièrement de Lit — LegbaElement ne fait qu’y poser styles.

Signature

class LegbaElement extends LitElement {
  static styles: CSSResultGroup;
}

Paramètres

N/A — une classe à étendre, pas une fonction.

Retour

N/A.

Erreurs

Aucune : LegbaElement ne valide rien, ne lève rien.

Exemple minimal

import { html } from "lit";
import { customElement } from "lit/decorators.js";
import { LegbaElement } from "@legba-core/ui";

@customElement("legba-example-widget")
class LegbaExampleWidget extends LegbaElement {
  render() {
    return html`<span>exemple</span>`;
  }
}

Exemple complet

import { html, css } from "lit";
import { customElement } from "lit/decorators.js";
import { LegbaElement } from "@legba-core/ui";

@customElement("legba-badge")
class LegbaBadge extends LegbaElement {
  static styles = [
    LegbaElement.styles,
    css`
      .badge {
        background: var(--legba-color-primary, var(--legba-color-primary-default));
        color: var(--legba-color-surface, var(--legba-color-surface-default));
        border-radius: var(--legba-radius, var(--legba-radius-default));
        padding: var(--legba-space, var(--legba-space-default));
      }
    `,
  ];

  render() {
    return html`<span class="badge" part="badge"><slot></slot></span>`;
  }
}

Pièges

• Ne jamais consommer un jeton --legba-* sans son repli -default : var(--legba-color-primary, var(--legba-color-primary-default)), jamais var(--legba-color-primary) seul — le jeton public n’est jamais déclaré par LegbaElement lui-même (voir THEME_TOKENS).
• Étendre static styles (comme dans l’exemple complet) doit toujours inclure LegbaElement.styles en premier élément du tableau, sous peine de perdre les jetons de thème par défaut et les règles d’accessibilité communes (point suivant).
• LegbaElement.styles ne contient plus seulement THEME_TOKENS (LGB-035). S’y ajoutent deux règles qui s’appliquent à tout le Shadow DOM du composant : :focus-visible (anneau de focus de 3 px en --legba-color-focus, avec outline-offset: 2px) et la classe utilitaire .sr-only (masquage visuel qui garde l’élément dans l’arbre d’accessibilité). Un composant qui compose [THEME_TOKENS, css\…`]au lieu de[LegbaElement.styles, css`…`]` reçoit les jetons mais PAS ces règles — il perdrait son anneau de focus visible.
• Ne jamais neutraliser l’anneau de focus (outline: none sur un contrôle) sans le remplacer par un indicateur d’au moins 3:1 : c’est le critère WCAG 2.4.7, et rien dans le paquet ne le rattraperait.
• Tout cycle de vie surchargé (connectedCallback, disconnectedCallback, etc.) doit appeler super.xxx() — LegbaElement n’ajoute rien lui-même, mais LitElement/ReactiveElement en dépendent pour fonctionner.

Voir aussi

• THEME_TOKENS
• contrastRatio