component template

component-name

Un composant Web pour…

Démo | Dès la lecture

Exemples

Exemple d'utilisation générale:

 < script type =" module " src =" component-name.js " > </ script >

< component-name >
  < button > Button </ button >
</ component-name >

Exemple à l'aide d'une méthode de secours:

 < script type =" module " src =" component-name.js " > </ script >

< component-name >
  < button > Button </ button >
  < a href =" # " > Anchor </ a >
</ component-name >
< style >
  component-name:not(:defined) button,
  component-name:defined a {
    display: none;
  }
</ style >

Exemple à l'aide d'options ou de méthode de secours supplémentaire:

 < script type =" module " src =" component-name.js " > </ script >

< component-name attribute =" value " >
  < button > Button </ button >
</ component-name >
< style >
  component-name[attribute="value"] {
    outline: 1px solid red;
  }
</ style > 

Caractéristiques

Ce composant Web vous permet de:

• Vérifiez pour…

Installation

Vous avez quelques options (choisissez-en une):

1. Installer via NPM: npm install @daviddarnes/component-name
2. Téléchargez la source manuellement à partir de GitHub dans votre projet.
3. Ignorez cette étape et utilisez le script directement via un CDN tiers (non recommandé pour une utilisation en production)

Usage

Assurez-vous d'inclure le <script> dans votre projet (choisissez-en un):

 <!-- Host yourself -->
< script type =" module " src =" component-name.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/component-name.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script > 

Crédit

Merci aux personnes suivantes:

• Zach Leatherman pour avoir inspiré ce modèle de repo composant Web