SVG elements in an HTML document report an upper-cased tagName ("PATH" instead of "path")
Mantenedores costumam responder em até 17 dias
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 2/5
- Tempo estimado
- 1-3 horas
- Facilidade para iniciantes
- 85/100
- Tipo de issue
- Bug
- Clareza
- Claramente especificada
- Status de atividade
- Ativa
- Stack de tecnologia
- html, javascript
- Domínio
- web-dev
Direção de pesquisa
O bug está em Element#tagName e Element#nodeName em esm/interface/element.js (linhas 118-119), que retornam localCase(this) de esm/shared/utils.js. Comece reproduzindo o script de reprodução da issue e, em seguida, adicione getters específicos de SVG em SVGElement que retornem localName quando namespaceURI for o namespace SVG. Está concluído quando path e svg informarem tagName/nodeName em minúsculas, elementos HTML como div continuarem informando em maiúsculas e um teste em test/svg/element.js cobrir isso.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
In an HTML document, tagName and nodeName of SVG elements come back upper-cased. Browsers upper-case them only for elements in the HTML namespace. That holds both for elements created with createElementNS and for elements that were parsed.
// npm i [email protected] && node repro.mjs
import { parseHTML } from 'linkedom';
const SVG = 'http://www.w3.org/2000/svg';
const { document } = parseHTML('<!doctype html><html><body><svg><path d="M0 0"/></svg><div></div></body></html>');
console.log(document.createElementNS(SVG, 'path').tagName); // "PATH" (browsers: "path")
console.log(document.createElementNS(SVG, 'path').nodeName); // "PATH" (browsers: "path")
console.log(document.querySelector('path').tagName); // "PATH" (browsers: "path")
console.log(document.querySelector('svg').tagName); // "SVG" (browsers: "svg")
console.log(document.querySelector('div').tagName); // "DIV" (browsers: "DIV", correct)
Same output on 0.18.12, 0.18.13 and main (3fcf145). Node 22.17.0, macOS.
Expected (DOM spec, Element.tagName): the qualified name is upper-cased only "if this is in the HTML namespace and its node document is an HTML document". An SVG element keeps its case: "path", "svg", "foreignObject".
Where it seems to come from: Element#tagName and Element#nodeName both return localCase(this) (esm/interface/element.js#L118-L119). localCase (esm/shared/utils.js#L31-L33) upper-cases whenever the document ignores case and does not look at the namespace. Overriding both getters in SVGElement to return this.localName looks enough. getElementsByTagName already compares localName first, so it would keep working.
Use case: server-side rendering of diagrams. Code written for browsers branches on tagName. For example, mermaid's mergePaths keeps the children whose tagName === 'path', so on linkedom a shape comes out with an empty d. The workaround on our side is a tagName/nodeName getter on the SVG element prototype that returns localName when namespaceURI is SVG.
Happy to send a PR with a test in test/svg/element.js if this is welcome. (Not covered by that change: a parsed <foreignObject> has the localName "foreignobject", which browsers adjust to "foreignObject".)
- Linguagem predominante
- HTML
- Estrelas
- 2.1k
- Forks
- 112
- Merge médio
- 11d 1h
- PRs com merge (30d)
- 1
Preparar o ambiente
Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de WebReflection/linkedom
-
`TextElement.toString()` puts the element text back at the first `><` of the start tag, so an attribute value containing `><` swallows the text of `<style>`, `<script>`, `<title>` and `<textarea>`Talvez já em andamento @vsolano9 assumiu há 1 dia. Aberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 78/100
WebReflection/linkedom#341 ·
Mantenedores costumam responder em até 17 dias
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 82/100
WebReflection/linkedom#340 ·
Mantenedores costumam responder em até 17 dias
-
Element#matches() compiles the selector on every callTalvez já em andamento @jonasporto assumiu há 1 dia. Aberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 35/100
WebReflection/linkedom#348 ·
Mantenedores costumam responder em até 17 dias
-
Dificuldade 3/5 Meio dia Facilidade para iniciantes 50/100
WebReflection/linkedom#345 ·
Mantenedores costumam responder em até 17 dias
-
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 68/100
WebReflection/linkedom#342 ·
Mantenedores costumam responder em até 17 dias
Todas as issues de WebReflection/linkedom
Issues semelhantes
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
bigskysoftware/htmx#4147 ·
Mantenedores costumam responder em até 5 dias
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 62/100
umami-software/umami#4637 ·
Mantenedores costumam responder em até 3 dias
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 63/100
AimesSoft/NipaPlay-Reload#1022 ·
Mantenedores costumam responder em até 1 dia
-
Hotkeys fire when pressed with the Ctrl key, so browser shortcuts also trigger player actionsTalvez já em andamento @RaphaelFakhri assumiu hoje. Aberta
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 75/100
muxinc/media-chrome#1332 ·
Mantenedores costumam responder em até 5 dias
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 66/100
Mantenedores costumam responder em até 1 dia