W3C home > Mailing lists > Public > www-style@w3.org > April 2014

Re: Surface JavaScript APIs for selector match changes

From: Joshua Peek <josh@joshpeek.com>
Date: Tue, 8 Apr 2014 23:28:22 -0500
Message-ID: <CA+RmjJ+oe2HKO7x4W+vtOjguPF8aAPvEhOPPcBT5=HtyTNt+=Q@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style list <www-style@w3.org>
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];


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

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

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:39 UTC