Issue with closest combinator (<) when used in combo with complex selector

[bob2517]

This wasn't working as expected when referencing an element from inside a private component:

button:click {
    host < div p {
        render: "Yo, wazzup?";
    }
}

It was getting the closest "div p" (as a parent), rather than the apparently correct behaviour of getting the closest div, then going back down the DOM to find the nearest p.

There isn't an official W3C spec for this, so observation based on intuitive use has been determining its expected behaviour. This appears to be the most intuitive use. So "host < div p" will now find the component host element, then find the closest div, then go back down the DOM looking for the next p tag, ie. following the CSS combinator rules.

The following are also now supported to give the full predictable range of combinator support, "host < div > p", "host < div + p" and "host < div ~ p". This is now on the branch.

The closest selector doesn't just work with host - it can be used with any combination of complex selectors and used any number of times in a selector.

[bob2517]

There was another related issue I found with this which I've fixed, and I'll put that on the branch in a moment.

[bob2517]

Do a proper docs page for this feature, with examples. It's a powerful tool and should get a bit of attention in the docs.