New "if-has" conditional

[bob2517]

This is a cross-DOM element ACSS version of the upcoming :has CSS selector.

ACSS conditionals are placed at the end of the selector line only work on the selector itself, if there is no target or scope specified in the conditional, so it's not quite the same as the CSS version, which will allow this: "main:has(.something) #content". You won't be able to use that syntax with if-has.

But you will be able to do this, which does the same thing:

content:if-has(.something scope(main))

That will look under "main" and see if there is a .something, and if so run the event on #content. So it will be possible to do the same thing. Chaining of conditionals ":if-has(blah):if-has(bleh)" is allowed by default in all ACSS commands anyway. It also allows commas syntax too, like "#content:if-has(.something, .somethingElse scope(main))", and if it has either of the items it will pass.

And it's actually a bit more flexible than CSS because you can target any element in the DOM, and not just the ones found when drilling down the DOM tree.

This is almost done, and will have a commit shortly. Just need to add the scope option and that should be it.

It's quicker to implement these in ACSS than the rendering engine, as that has bigger performance concerns than ACSS, and the underlying architecture has to be different than ACSS. CSS commands are "always on", which means constant monitoring. Whereas in ACSS, commands are dynamic and conditions only get checked on specific events that match the prior CSS selector, which is something that a developer would do in JavaScript anyway.

[bob2517]

This command will work in the scope area that it is run in. So if you're in a shadow DOM or a private component, the selectoir scope will remain within that component unless taken out of the scope with ("host" or "document") selector options.

[bob2517]

Now on the branch.

Plain example syntax:

button:if-has(span):click {
    p {
        render: "That button had a span in it.";
    }
}

Scoped example syntax:

button:if-has(scope(.container) p):click {
    render: ".container has a p tag inside it.";
}