JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:data="http://example.com/">
        <a xlink:href="#url" data:myAttribute1="value" >
            <circle cx="50" cy="50" r="40"/>
        </a>
    </svg>
</body>

CSS

@namespace xlink "http://www.w3.org/1999/xlink";

[cx="50"]{
    /* non-namespaced attributes are easy */
    stroke:red;
}
[href="#url"]{
    /* namespaced attributes don't match without the namespace*/
    fill:blue;
}
[xlink|href="#url"]:hover{
    /* either specify the namespace *and* define it using @namespace */
    fill:green;
}
[*|href="#url"]:active{
    /* or specifically say that you don't care about the namespace */
    fill:red;
}

JavaScript

var a = document.querySelector('[href="#url"]');
if (a) console.log('[href="#url"]', " selects ", a);

try {
    a = document.querySelector('[xlink|href="#url"]');
    if (a) console.log('[xlink|href="#url"]', " selects ", a);
    else console.log('[xlink|href="#url"]', " does not select anything");
}
catch(e){ 
    console.log("error selecting ", '[xlink|href="#url"]', e);
}

try {
    a = document.querySelector('[*|href="#url"]');
    if (a) console.log('[*|href="#url"]', " selects ", a);
    else console.log('[*|href="#url"]', " does not select anything");
}
catch(e){ 
    console.log("error selecting ", '[*|href="#url"]', e);
}

try {
    a = document.querySelector('[*|myAttribute1="value"]');
    if (a) console.log('[*|myAttribute1="value"]', " selects ", a);
    else console.log('[*|myAttribute1="value"]', " does not select anything");
}
catch(e){ 
    console.log("error selecting ", '[*|myAttribute1="value"]', e);
}

try {
    a = document.querySelector('[data\\:myAttribute1="value"]');
    if (a) console.log('[data\\:myAttribute1="value"]', " selects ", a);
    else console.log('[data\\:myAttribute1="value"]', " does not select anything");
}
catch(e){ 
    console.log("error selecting ", '[data\\:myAttribute1="value"]', e);
}


try {
    a = document.querySelector('[*|myattribute1="value"]');
    if (a) console.log('[*|myattribute1="value"]', " selects ", a);
    else console.log('[*|myattribute1="value"]', " does not select anything");
}
catch(e){ 
    console.log("error selecting ", '[*|myattribute1="value"]', e);
}

try {
    a = document.querySelector('[data\\:myattribute1="value"]');
    if (a) console.log('[data\\:myattribute1="value"]', " selects ", a);
    else console.log('[data\\:myattribute1="value"]', " does not select anything");
}
catch(e){ 
    console.log("error selecting ", '[data\\:myattribute1="value"]', e);
}


try {
    a = document.querySelector('[xlink\\:href="#url"]');
    if (a) console.log('[xlink\\:href="#url"]', " selects ",...