Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
#251 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
42/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
javascript
Bereich
frontend

Rechercherichtung

Reproduziere das bereitgestellte Carousel-Beispiel mit dem html Tagged-Template-Einstiegspunkt und konzentriere dich auf den Unterschied zwischen wörtlichem Markup und interpolierten Werten wie ${mainImage} und ${minis}. Ermittle die beabsichtigte Interpolationssemantik und füge eine Abdeckung für das erwartete VDOM-Ergebnis hinzu; erledigt ist dies, wenn interpolierte HTML-Strings ohne die Notwendigkeit eines separat erstellten Elements als Markup gerendert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

        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?

Vorherrschende Sprache
JavaScript
Sterne
9k
Forks
181
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus developit/htm

Alle Issues in developit/htm

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.