JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg width="100" height="100">
        <g id="foo">
            <defs>
                <clippath>
                    <rect width="10" height="10"/>
                </clippath>
            </defs>
        </g>
    </svg>
    <div id="output"></div>
</body>

CSS

svg {
  border: solid 1px #333;
}

JavaScript

var output = d3.select('#output');
function log(msg) {
  output.html(output.html() + msg + '<br>');
}

// works in: Chrome, Safari, FireFox
log('getElementsByTagName is empty: ' + !document.getElementsByTagName('clipPath').length);

// works in: nothing!
log('d3.select() is empty: ' + d3.select('clipPath').empty());

// works in: FireFox
log('querySelector is empty: ' + !document.querySelectorAll('clipPath').length);