@Misho / @diegocanal,
Thanks for writing in! This can effectively be done now with Component JavaScript in the code editors. Additionally, the idea of “Element JavaScript” is a slightly different use-case than Element CSS and the needs there for that feature.
With Element CSS, the primary use-case here is being able to tap into the auto-generated classes using the $el
symbol in the editor to allow you to give you some specificity to override styles as needed.
With JavaScript, we generally don’t target Elements this way. Typically, you’d be using a data attribute on the Element you’re wanting to target, access all of those Elements via JavaScript, and write your code to perform the actions you need.
To leverage this now, all you need to do is add a data attribute to the Elements you want to target (e.g. data-my-element
) and then write some custom JavaScript in the “Component JavaScript” that targets all instances of that data attribute. You can of course also use the data attribute to pass in data via JSON, which you could access inside your scripts.
The nice thing about Component JavaScript (or Component CSS) is that it only gets output once no matter how many instances of the Component are on your page, whereas “Element JS” would be output over and over and over again.
Let’s say you had 20 Button Components on a page…if “Element JS” was a feature, it would mean your script would be output 20 times over. Writing it in Component JavaScript means it is only output once, and when written and hooked up cleanly it will work for all instances of your Element.
Hopefully that makes sense. Hopefully this helps to provide some clarity on good strategies to use when doing more advanced implementations like this.
Cheers!