Button counters & variable scopes
There are different ways to code the same thing with Active CSS, as is the case with most programming languages.
There are, however, implications in using certain techniques that you should be aware of - particularly with regards the scoping of Active CSS variables.
Here are a few different examples on how to code a basic button counter. The methods used here demonstrate scoped variables, and also shows how to use components within either custom elements or regular div elements.
To understand these, you will need to look at both the Active CSS and the HTML.
Button counter 1
Basic counter with variable in the DOM scope.
Button counter 2
Counter as component with a variable in the DOM scope.
Host tag is a div element.
Button counter 3
Counter as component with a variable in the DOM scope.
Host tag is a custom element.
Button counter 4
Counter as a private component with isolated variables.
Host tag is a div element.
Button counter 5
Counter as a private component with isolated variables.
Host tag is a custom element.
Button counter 6
Counter as a shadow DOM component with isolated variables.
Host tag is a div element.
Button counter 7
Counter as a shadow DOM component with isolated variables.
Host tag is a custom element.
Button counter 8
Counter as a shadow DOM component with variables in the DOM scope.
Host tag is a div element.
Button counter 9
Counter is incremented in an outer event scope to the component due to a document event scope on the component. The variable scope of an inherited event is in that outer scope. Ie. The variable in the outer scope is only available in the outer scope.