Highlights for version 2.10.0...
Components - import html and CSS from templates
Now you can import HTML and CSS directly into ACSS components from template HTML elements.
The example below is a shadow DOM component, but you can put it in the top-level DOM by removing the shadow option
As an aside, all components, including shadow DOM components, have a global variable scope unless given a private scope.
Docs are here.Components - import html and CSS from files
Now you can import HTML and CSS directly into ACSS components from files.
This is the same example as using templates above, but the HTML and CSS are from files, so you can't see them here. You can inspect DevTools if you want to see what is being pulled in.
If you want to turn it into a shadow DOM component, just add the shadow option to the @component syntax, like in the example above, then inspect DevTools to see what happens.
Docs are here.The innerhtmlchange event
This is a new event (ACSS only) which can be used to observe HTML changes inside elements.
There is a slight performance cost with this one, so use it wisely.
Ajax commands - accept-vars option
The json option in ajax commands will always translate returned JSON into variables when the JSON file is loaded.
But what if the JSON values themselves contain references to ACSS variables?
Wouldn't it be nice if those could also be evaluated, if they were not backslash-escaped on the server, obviously?
To allow this, add the accept-vars option. (Note: this trick doesn't work with ACSS variables that contain HTML (variables prefixed with a $) yet.)
In the example below, the "{compliment}" variable is present in the "address" value inside the JSON server response.
(You can use DevTools to inspect the loaded JSON.)
This has given us an idea - look out for the json loading option for components in a future version of ACSS. It will be like the html and css options above, but for json.