Shadow DOM - ajax
This is an example of how you can draw a list of addresses gotten from the server, in order to dump into a shadow DOM component. You don't have to use a shadow DOM component - you could use an array of return variables and draw in the document scope from there - but in this case it's helpful to isolate CSS and variable names as you'll see from the simple code, so this is a good method. Keep reading!
Each address tag drawn has an person-id attribute, which is just a number, and when the address tag is drawn it then runs an ajax command to a file sending over the attribute as a parameter (you could use a REST endpoint if you know what that is and want to use one). When the ajax call returns a response, it returns a name and address as JSON return variables and the component updates automatically. Each tag sends a separate ajax call.
Each ajax call returns a JSON string. These are the strings each component returns:
First tag draw (person-id=1): {"title":"Rod","address":"27 Madeup Road, Blithering, Ploushershire."}
Second tag draw (person-id=2): {"title":"Jane","address":"76 Flimjam Street, Upper Smythington, Blumpton."}
Third tag draw (person-id=3): {"title":"Freddy","address":"Flat 1a, 2 St. Bob's Avenue, Trousering, Fremm."}
The variables are data-binded in placeholders in the component, so it updates automatically. It does this by using double-curlies instead of single curlies.
All ajax return JSON variables get scoped to the component they are called from if the component is set to a private scope.
Variables that begin with $ are allowed to contain HTML.
Variable without a $ are not allowed to contain HTML.
The privateVars scope gives private variables inside the component, but inherits all variables from outside. If you wanted to turn off the inheriting of outside variables and have the component fully self-isolated, you would use the strictlyPrivateVars option on the component instead of privateVars.
No Active CSS variables are in the window scope, they are all internal to Active CSS config. But it is possible to have all your config sharing the same "global" Active CSS scope, which gives you all the ease of global variables without worrying about clashing with 3rd-party JavaScript.
There are alternative methods of doing this example in practice, like just running one ajax call and looping over the values drawing components using an @each loop. That would probably be a better use of bandwidth if you could code on the back-end. Pre-rendering would also probably be faster to draw if that was practical.
Have a look at the code below, and the HTML. That really is all the code you need, plus a back-end to server up the JSON string. Open up the DevTools console and refresh the page to inspect the ajax calls.