Ne vous fiez pas aux valeurs d'attribut par défaut pour styliser les composants Web

Ne vous méprenez pas, je n'ai rien contre les valeurs par défaut des API des composants Web. Le problème que j'ai avec eux, c'est qu'ils ne sont pas fiables.

Le problème

Une approche courante pour fournir une liste des options disponibles pour une API consiste à utiliser le type untion de TypeScript.

/** The display variant for the button */
@property({reflect: true})
variant: 'default' | 'solid' | 'ghost' = 'default';

Voici quelques CSS de base pour faire fonctionner les variations.

:host {
  --accent-color: #0265dc;
}

button {
  cursor: pointer;
  padding: 0.5rem;
}

:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

:host([variant='solid']) button {
  border: solid 1px var(--accent-color);
  background-color: var(--accent-color);
  color: white;
}

:host([variant='ghost']) button {
  border: solid 1px transparent;
  background-color: transparent;
  color: var(--accent-color);
}

REMARQUE : Les exemples de code utilisent Lit, mais les principes discutés ici peuvent facilement être appliqués à d'autres bibliothèques et frameworks.

Le défi est que les éléments/composants Web personnalisés peuvent être utilisés n'importe où. Ils peuvent être insérés dans le DOM sous forme de chaînes, dans des langages côté serveur comme PHP, ils peuvent être créés dans la fonction createElement de JavaScript, ou même en HTML standard. Ce que je veux dire, c'est qu'il n'existe pas toujours de moyen « sécurisé » de garantir que les attributs des éléments personnalisés sont définis avec précision. Pour cette raison, l'un des éléments de la liste de contrôle des relations publiques de notre bibliothèque de composants est :

✅ Les attributs et les propriétés fonctionnent lorsqu'ils sont définis, non définis et mal définis.

Tester notre API

Compte tenu de ces directives, testons la configuration de l'API ci-dessus.

• Ensemble - tout a l'air bien.

<my-button variant="default">Default Button</my-button>
<my-button variant="solid">Solid Button</my-button>
<my-button variant="ghost">My Button</my-button>

• Désactivé
  • Sans jeu d'attributs, cela fonctionne bien car nous avons une valeur par défaut et elle est configurée pour refléter l'attribut sur l'élément lorsqu'il est défini.
  • si nous définissons la propriété variant sur non défini, cela casse les styles.

<!-- No attribute set -->
<my-button>No Attribute Button</my-button>

<!-- JSX example -->
<my-button variant={undefined}>Unset Button</my-button>

• Mal défini - lorsque nous définissons l'attribut variante sur "déchets", il se brise également.

<my-button variant="rubbish">Rubbish Button</my-button>

Vous pouvez tester cet exemple ici :

Correction de l'API

Le moyen le plus simple de résoudre ce problème consiste à faire en sorte que les styles des éléments de bouton correspondent aux styles par défaut.

button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
  cursor: pointer;
  padding: 0.5rem;
}

Nous pouvons maintenant supprimer le code de la variante par défaut.

/* We can remove this */
:host([variant='default']) button {
  border: solid 1px var(--accent-color);
  background-color: white;
  color: var(--accent-color);
}

Pour éviter toute confusion, vous pouvez laisser le style et ajouter un commentaire.

/* Styles for this variant are under the `button` element */
:host([variant='default']) { }

Mettons également à jour l'API TypeScript pour la rendre facultative et supprimons la valeur par défaut.

/** The display variant for the button */
@property({ reflect: true })
variant?: 'default' | 'solid' | 'ghost';

Les éléments se comportent désormais de manière cohérente si la valeur est définie, non définie ou mal définie !

Vous pouvez voir le code final ici :

Conclusion

En supprimant une dépendance sur les valeurs par défaut, vous pouvez créer des API de composants Web plus résilientes. Si vous devez avoir des valeurs par défaut pour que vos composants fonctionnent correctement, assurez-vous de consulter cet article pour créer des composants Web qui fonctionnent de manière cohérente.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!