Turning drawn HTML into a component (@scope)
Note: This is experimental syntax, feel free to use it, but please report any bugs if found.
Already have HTML on the page that you want to isolate and turn into an ACSS component? For this, you can use the scope parameter with the @component.
Using this on a selector gives you the power of component events and variables on already prerendered HTML.
It follows the rules of ACSS components but skips any rendering of HTML because it uses what is already drawn on the page. It does not currently support shadow DOM, so styling CSS must work with the rest of the page.
It needs a parent tag to operate on. You specify the parent tag in the @scope declaration. Everything inside this parent tag follows the rules of the component, such as private or strictlyPrivate.
Only one component declaration can be attached to pre-rendered HTML, and component scopes must not overlap with other components.
It supports nested components.
Turning pre-rendered HTML into a component with private variables.
Two components are created in the example below.
The events are in the DOM scope, but the variables are isolated to each component.
Click on the blocks to see the effect.
Try changing strictlyPrivateVars to strictlyPrivate to ignore outer events, and the outer events that change the colour will stop working.