Re: Surface JavaScript APIs for selector match changes

On Tue, Apr 8, 2014 at 7:51 PM, Tab Atkins Jr. <> wrote:
> I've been thinking we should add a Selector interface anyway.  What
> about an API like:
> var sel = new Selector(".foo", document)
> Or something similar.  Dunno whether I'd want to use events or
> callbacks, and whether it should fire once per element (passing that
> element to the callback) or once per set change (passing the matched
> set to the callback).

That sounds wonderful too.

Maybe it would expose the reverse of the Element match and query? e.g.
sel.matches(element) and sel.queryAll(container).

Heres another API idea.

    var sel = new Selector(".foo", document) {
      // matched a .foo, lets add an event handler to it
      el.addEventListener('click', onClick);
      return function() {
        // .foo was removed from our element instance, cleanup
        // its event handler to disable the behavior.
        el.removeEventListener('click', onClick);

Also related to the Selector interface idea, I've worked on a
"selector set" concept that was implemented mainly for performance. It
models the CSS rule matching API kinda nicely. Though, it doesn't
cover this "watching" concept.

    var styles = new SelectorSet();
    styles.add('p', {
      fontSize: '12px',
      color: 'red'
    styles.add('p.item', {
      background: 'white'

    // apply matching styles to element
    styles.matches(el).forEach(function(rule) {
      for (name in[name] =[name];

I'm happy to help implement any prollyfill's in this area.


Received on Wednesday, 9 April 2014 04:28:49 UTC