Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

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

Aberta
  • Algo errado?
#251 1 comentário 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
42/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript
Domínio
frontend

Direção de pesquisa

Reproduza o exemplo de Carousel fornecido usando o ponto de entrada de tagged template html, concentrando-se na diferença entre markup literal e valores interpolados, como ${mainImage} e ${minis}. Determine a semântica de interpolação pretendida e adicione cobertura para o resultado VDOM esperado; considera-se concluído quando strings HTML interpoladas são renderizadas como markup sem exigir um elemento criado separadamente.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

        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?

Linguagem predominante
JavaScript
Estrelas
9k
Forks
181
Nenhum PR com merge em 30d

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de developit/htm

Todas as issues de developit/htm

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.