I discovere something weird the other day. It looks like in Chrome and Firefox, attribute selectors will automatically be closed. Consider this example:
// <div some-attr>hello</div> const selector = '[some-attr]'; document.querySelector(selector);
Notice the opening and closing square brackets that form the valid selector. Now see this selector:
// <div some-attr>hello</div> const selector = '[some-attr'; document.querySelector(selector);
Notice the missing closing square bracket.
In Chrome 66 and Firefox 59, this selector will still work. But in Safari, it does not work. I was even able to get selectors with values to work without closing quotation marks:
// <div some-attr-with-value="1">hello</div> const goodSelector = '[some-attr-with-value="1"]'; const badSelector = '[some-attr-with-value="1'; document.querySelector(goodSelector); // finds the element document.querySelector(badSelector); // finds the element in Chrome and Firefox, but not Safari
This is super strange behavior and I have not tracked down why it is the way it is. If anyone knows, please twitter me!
Here’s an interactive example on JSFiddle: https://jsfiddle.net/mehulkar/1mobjpre/22/