🔁 Utiliser un Web Component avec un fichier JSON

📁 Exemple de data.json :

[
  {
    "name": "Alice Martin",
    "avatar": "https://randomuser.me/api/portraits/women/20.jpg",
    "bio": "Développeuse front passionnée."
  },
  {
    "name": "Benoît Lefevre",
    "avatar": "https://randomuser.me/api/portraits/men/12.jpg",
    "bio": "UX designer et illustrateur."
  }
]

💻 HTML à intégrer dans votre page :

<div id="container"></div>

<script type="module">
  import './webcomponents/carte-auteur.js';

  fetch('data.json')
    .then(res => res.json())
    .then(auteurs => {
      const container = document.getElementById('container');
      auteurs.forEach(auteur => {
        const el = document.createElement('carte-auteur');
        el.setAttribute('name', auteur.name);
        el.setAttribute('avatar', auteur.avatar);
        el.setAttribute('bio', auteur.bio);
        container.appendChild(el);
      });
    });
</script>

📌 Vous pouvez adapter ce code pour n'importe quel Web Component généré avec des attributs dynamiques.