Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

html string added in template form treated as string, not html

Ouverte
#251 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
42/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
À l'abandon
Stack technique
javascript
Domaine
frontend

Piste de recherche

Reproduisez l’exemple Carousel fourni en utilisant le point d’entrée de template tagué html, en vous concentrant sur la différence entre le balisage littéral et les valeurs interpolées telles que ${mainImage} et ${minis}. Déterminez la sémantique d’interpolation attendue et ajoutez une couverture pour le résultat VDOM attendu ; le travail est terminé lorsque les chaînes HTML interpolées sont rendues comme du balisage sans nécessiter la création séparée d’un élément.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

        function Carousel(props) {
            let images = props.images.split(",");
            images.map(image => image.trim());
    
            let mainImage = `<img src="${images[0]}"></img>`;

            let minis = "";
            images.forEach(imageUrl => {
                minis = minis.concat(`<img class="mini" src="${imageUrl}"></img>`)
            })

            console.log('a',images,minis)
            
            console.log(html`
                <div class="carousel">
                    <div class="main">
                        <img src="${images[0]}"></img>
                        ${mainImage}
                        <p class="description">
                            Tro rilata fundamenta tabelvorto ik, o pre frazo iometo interalie. Dum otek iliard malsupera il, pro gh neigi gentonomo. Aliam multe poste ke bio, bo aha jeso samideano. Usono laŭlonge si kuo, ju apud anstataŭ ligvokalo ial, ikso tempo ut nur. Mo alta numeralo eks, timi pebi frazetvortigo no nen. Anti neniu tuj so, kapabl respondeci prepozitivo op fri.
                        </p>
                    </div>
                    <div class="minis">
                        ${minis}
                    </div>
                </div>
            `)
        }

specifically, notice these children:

                        <img src="${images[0]}"></img>
                        ${mainImage}

Even though they're identical input, one is converted to a string child, one is converted to a vdom object.

image

This is pretty annoying. For something this small, I don't want to create a preact element. I find it weird that this option isn't available. Am I missing something? Why does htm not allow this to be parsed as html but insist on keeping it as a string?

Langage dominant
JavaScript
Étoiles
9k
Forks
181
Métriques de merge des PR
Aucune PR mergée en 30 j

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de developit/htm

Toutes les issues de developit/htm

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.