querySelector after using case sensitive setAttributeNS

Question

If I have a case sensitive attribute like nativeAttr I can then use querySelector to find the element by its attribute name. But if I programmatically add a case sensitive attribute like setAttr, then querySelector no longer finds the html element.

How can I set the case sensitive attribute and also make it work with querySelector?

const node = document.getElementById('node')
node.setAttributeNS(null, 'setAttr', 'set')
console.log('nativeAttr', document.querySelector('[nativeattr]')?.id)
console.log('nativeAttr', document.querySelector('[nativeAttr]')?.id)
console.log('setAttr', document.querySelector('[setattr]')?.id)
console.log('setAttr', document.querySelector('[setAttr]')?.id)

// the attribute is set in camelCase correctly
console.log(node.getAttributeNS(null, 'setAttr'))

// here are the names of the attributes; seems that nativeAttr is lowercase
console.log('nativeAttr', node.attributes[1].name, node.attributes[1].localName)
console.log('setAttr', node.attributes[2].name, node.attributes[2].localName)

<div id="node" nativeAttr="native"></div>

Case sensitive attributes are used by svg elements, so it's a valid use case. For example:

// only one viewBox element
console.log(document.querySelectorAll('[viewBox]').length)

// add the viewBox attribute to the second svg
const svg2 = document.getElementById('svg2')
svg2.setAttributeNS(null, 'viewBox', '0 0 50 50')

// now both svg elements show up
console.log(document.querySelectorAll('[viewBox]').length)

<svg id="svg1" width="30" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

<svg id="svg2" width="30" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50"/>
</svg>

So, as you can see it works for svg, but not for regular html elements.

According to the spec, uppercase letter are allowed in the attribute names.

In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of ASCII lower and ASCII upper alphas.

In `querySelector`, you can theoretically [use the `s` token to identify case sensitivity](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors), but [currently only Firefox allows this syntax](https://caniuse.com/mdn-css_selectors_attribute_case_sensitive_modifier) and technically it's only for the value, not the name. — Heretic Monkey, Jan 19 '22 at 20:51
@HereticMonkey The issue is that `querySelector` fails on both `setAttribute` and `setattribute`. Please check my updated question with the extra debug. — dreamLo, Jan 19 '22 at 20:59
@connexo You can use `setAttributeNS` to set case sensitive svg attributes like [linearGradient](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) — dreamLo, Jan 19 '22 at 21:00
@connexo `linearGradient` was a bad example. I wanted to say `viewBox` or other svg attributes. Check my question where I added the svg example. No it's not used on svg elements, but on html elements, because I'm working on parser that convert HTML to JSX. — dreamLo, Jan 19 '22 at 21:16
Can you give some reference as to why you think setAttributeNS allows case sensitivity on HTML elements? — connexo, Jan 19 '22 at 21:22
@connexo It does seem to allow for case sensitive attributes in regular html elements. If it allows for this, I think it should work in `querySelector` too. Either it's a bug in `setAttributeNS` or a bug in `querySelector`. Regardless, I'm looking for a way to also query these camel case attributes. — dreamLo, Jan 19 '22 at 21:41

gru · Answer 1 · 2022-01-19T20:36:42.767

0

Attributes are always processed in lower case, so if you provide the attribute nativeAttr, this will be transformed to nativeattr.

As it is described in the HTML standard:

All attribute names on HTML elements in HTML documents get ASCII-lowercased automatically

It is recommended to use kebab-case with attribute names. Check out this minimal example below:

const el = document.getElementById('node');
console.log('before', el.getAttributeNS(null, 'native-attr' ))
el.setAttributeNS(null, 'native-attr', 'changed');
console.log('after', el.getAttributeNS(null, 'native-attr' ))

<div id="node" native-attr="native"></div>

Also read here: are html5 data attributes case insensitive?

edited Jan 19 '22 at 20:36

answered Jan 19 '22 at 20:29

gru

2,319
6
24
39

I need camelCase attributes because I work on a parser from HTML to JSX. The attribute `setAttr` is seen by the DOM as case sensitive. I just want to know how do I send these changes to the querySelector too. – dreamLo Jan 19 '22 at 20:44
Although I understand your motivation, you should better stick to the standard, because as you can see, it could behave in an unwanted way. – gru Jan 19 '22 at 20:58
Why don't you provide the HTML attributes as kebab-case, which are converted to camelCase props when parsing? Or the other way around, depending on your situation. Like this: https://stackoverflow.com/questions/57556471/convert-kebab-case-to-camelcase-with-javascript – gru Jan 19 '22 at 21:01
Because the parser takes all sort of attributes, and I wouldn't know what the user added, either kebab, camelCase, etc. In the end it needs to be converted to JSX, and JSX needs camelCase for its special attributes like `readOnly`, `defaultValue` etc, but it also accepts kebab attributes. – dreamLo Jan 19 '22 at 21:04

score 0 · Answer 2 · answered Jan 19 '22 at 21:37

The appropriate character for selecting namespaced attributes is the pipe character (|). If there is no namespace prefix, you just use nothing before the pipe, so [*|setAttr] is supposed to select your element. However, in my testing, it does not do so, via CSS nor querySelector:

const node = document.getElementById('node');
node.setAttributeNS(null, 'setAttr', 'set');
node.setAttributeNS('https://example.com/namespace', 'ns:someAttr', 'set');
console.log('html', node.outerHTML);
console.log('nativeAttr', document.querySelector('[|nativeAttr]')?.id);
console.log('setAttr', document.querySelector('[*|setAttr]')?.id);
console.log('someAttr', document.querySelector('[*|someAttr]')?.id);

@namespace ns url("https://example.com/namespace");
div[|nativeAttr] { color: blue; }
div[*|setAttr] { color: red; }
div[ns|someAttr] { color: green; }

<div id="node" nativeAttr="native">Ran</div>

The syntax does not work even when a prefix and namespace is provided, so that seems to be a red herring as well.

This answer is less an answer as it is documentation of findings, along with code demonstrating what should work. The tests were run in Microsoft Edge Version 97.0.1072.62 (Official build) (64-bit) on Window 10 Version 10.0.19043.1466.

Interesting find. I also added a quote from the html spec in the question, about attribute names being allowed to have upper case letter. — dreamLo, Jan 19 '22 at 21:57

querySelector after using case sensitive setAttributeNS

2 Answers2