There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

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 8

Counter as a shadow DOM component with variables in the DOM scope.

Host tag is a div element.