Stimulus: data-target makes library incompatible with many other libraries

[jantuitman]

Hi,

today I tried out Stimulus for an upcoming project, and tried 2 different css frameworks, Google Materialize and bootstrap.native (which is bootstrap without jquery).
In both these combinations i run into the same problem, the fact that you are using an attribute "data-target". This seems to be frequently in use in the other frameworks as well, but for different purposes. For example Materialize autocomplete stores some kind of link to its options. and bootstrap.native uses it as a target for modals.

So I wondered, if this attribute could have a more specific name, like data-controller-target, because now it fails to be a framework for "The html you already have", despite its claim.

Would be really helpful if it was renamed.

Thanks,
Jan

[adrienpoly]

That is exactly the reason why in Stimulus you need to scope the targets with the controller name

data-target="myControllerName.myTargetName"

This way there is no conflict possible with Bootstrap JS or other CSS frameworks

[jantuitman]

Yes there is a conflict. Because the other frameworks set the attribute,overwriting it, at least material autocomplete does that. And bootstrap wants it to be a pointer to a Modal dialog. So, of you have a button which opens a Bootstrap Modal dialog, it cannot be a target of the controller at the same time.

[adrienpoly]

Ok, then one solution is to set a custom schema

const application = new Application(document.documentElement, {
  controllerAttribute: "data-controller",
  actionAttribute: "data-action"
  targetAttribute: "data-target"
})
// ...
application.start()

more details here #124

[jantuitman]

Thanks. That is a good workaround for now. Since this has come up multiple times IMHO it would be wise if the attributes were renamed so that they were unique by default, e.g. “data-st-action”, “data-st-controller”, “data-st-target”.

[sstephenson]

Thanks for the feedback! We’ll keep this in mind.

[nitsujri]

FWIW, I wish this was part of the primary documentation because of the proliferation of Bootstrap and the conflicting namespace.

I was able to allow both Stimulus and bootstrap to work along side for example - the Accordion - by:

data-target='#accordionButton, controller-name.button'

The Stimulus target should come second.

If you want it to come first, it needs to have a weird syntax:

data-target='controller-name.button ,#accordionButton'

Key mentions are:

1. , - very explicitly, the SPACE COMMA

Bootstrap splits on , and Stimulus splits on SPACE resulting in this odd looking thing.

[adrienpoly]

@nitsujri you can also test the Stimulus 2.00 alpha (see the link in #202)

2.0 of Stimulus introduces a new API for targets that makes them by default compatible with Bootstrap.

<div data-target='#accordionButton, controller-name.button'>

becomes in 2.0

<div data-target='#accordionButton" data-controller-name-target='button'>