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.
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?
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.