Data-mycontroller-foo-value vs. data-mycontroller-foo w/ data.get('foo')

1

I see some Stimulus controllers that assign component settings using:

data-mycontroller-foo="bar"

in the HTML and then retrieving this value using this.data.get("foo") in the controller.

This makes assigning initial values a little cleaner (don’t need to append -value to the HTML attribute, and don’t need to declare the value in the controller.

I understand that this doesn’t allow you to reactively manage that value from the controller and I don’t see it documented anywhere in the Stimulus handbook.

Just wondering if this is a legacy data access mechanism that should be avoided, or is it an acceptable alternative for when you have initial values that you know you don’t need to be reactive?

2

Stimulus best practice does not suggests avoiding this approach. Stimulus values provide convenience methods (e.g. type casting, default values, change callbacks, etc), but not required.

FYI, when using standard javascript to get data values, I prefer using dataset which supports both getter and setter.

Similarly, you can use both stimulus targets to locate elements inside of a stimulus controller or a standard DOM query (e.g. document.getElementById(), document.querySelector(), etc) to find elements inside or outside a stimulus controller.

Like stimulus values, stimulus targets add some additional convenience methods (e.g. this.has[Name]Target) which can simplify development, but not required.