Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

document.querySelector('svg:not(:root)') inconsistency

See original GitHub issue

Assuming the HTML:

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewBox="0 0 3 2">
  <rect width="1" height="2" x="0" fill="#008d46" />
  <rect width="1" height="2" x="1" fill="#ffffff" />
  <rect width="1" height="2" x="2" fill="#d2232c" />
</svg>

Running:

window.document.querySelector('svg:not(:root)')

Returns null in jsdom, but returns [object SVGSVGElement] in Firefox. querySelectorAll() behaves similarly. Isn’t this a bug?

Test cases:

JSBin for browser testing: http://jsbin.com/hecijisuri/edit?html,js,console,output
jsdom test case: https://runkit.com/57ebc041d4a27f140028fd78/58b5eef1aa8fd000138fc178

Issue Analytics

State:
Created 7 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

domeniccommented, Mar 6, 2017

Why are you pinging us? You’ve reported a bug, which is helpful. Do you have a pull request we should be reviewing?

0reactions

ArmorDarkscommented, Apr 4, 2017

@domenic @Sebmaster Maybe someone else who knows internals of jsdom will have time to look into it? Can you invite someone here? :root element and :not, and everything related to it becomes daily more and more used, so it’s crucial to support it properly.

Besides, right now it is massive blocking issue for important PR of uncss: https://github.com/giakki/uncss/pull/280#issuecomment-291378455.

Top Results From Across the Web

Can't access an element in svg with JS - Stack Overflow

This query will return the first element that matches any of those elements. var elem = document.querySelector("path, rect, circle, ellipse, ...

Using SVG with CSS3 and HTML5

The root element both defines the document as an SVG file and defines the SVG drawing region. All the graphic content will be...

A Roadmap to XML Parsers in Python - Real Python

In this tutorial, you'll learn what XML parsers are available in Python and how to pick the right parsing model for your specific...

querySelector is case sensitive for elements in the SVG ...

1700.77 Safari/537.36 Steps to reproduce: Create a document with an svg element. Compare the results of document.querySelectorAll('svg') and document.

Balisage Paper: How long is my SVG <text> element?

Browser support for both of these features is too inconsistent and ... Because creating SVG in this way does not require JavaScript programming, ......