In HTML5, CSS selectors seem to operate well with data-* attributes. For example:

<style>
div[data-foo='bar'] {
  background:#eee;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>

will properly style the first . But, attempts to select such elements using the selectors-api fail. Examples:

var foos = document.querySelectorAll("div[data-foo]='bar'");

or

var foos = document.querySelectorAll("div data-foo='bar'");

in Chrome and Safari, this produces a cryptic error:

SYNTAX_ERR: DOM Exception 12

Any thoughts on how to use the selectors-api to properly select elements on the basis of data-* attributes?