Re: Surface JavaScript APIs for selector match changes

On Tue, Apr 8, 2014 at 7:51 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> I've been thinking we should add a Selector interface anyway.  What
> about an API like:
>
> var sel = new Selector(".foo", document)
> sel.watch(function(record){...})
>
> 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)
    sel.watch(function(el) {
      // 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 rule.data)
        el.style[name] = rule.data[name];
    });

https://github.com/josh/selector-set


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

Thanks!