New "empty" command

[bob2517]

Emptying out the contents of an HTML block is quite a common action. It's an innerHTML = "" type-of scenario.

But up to now the syntax has been a bit messy.

Consider this - you just want to empty a div during an event. You would do this:

#myButton:click {
    .myDiv {
        render: "";
    }
}

As this is such a common action, I've made an "empty" command, which can target any element or elements using the regular ACSS selector syntax (which is just standard CSS, plus some other stuff, like a self selector, "<" parent or closest selector, iframe content selector, etc).

So you can now do this, which is a bit easier on the eye:

#myButton:click {
    empty: .myDiv;
}

This will now allow the default ACSS syntax of comma separated values to be more useful, so if you want to empty more than one thing, you can do this by separating with commas:

#myButton:click {
    empty: .myDiv, main ul > .selected, & < section .somewhereElse div:first-child;
}

Less typing for all, when you want to empty an area...

This is done offline and I'll do a commit shortly.

[bob2517]

It goes without saying that 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.