Match targets exactly

[koddsson]

Given the component and markup:

@controller
class MyController extends HTMLElement {
  @target foo!: HTMLElement

  connectedCallback() {
    console.log(this.foo)
  }
}

<my-controller>
  <div data-target="my-controller.foobar"></div>
  <div data-target="my-controller.foo"></div>
</my-controller>

the component will log <div data-action="my-controller.foobar"></div> once it's connected even though we obviously wanted the other target.

This is because we are using a attribute selector that just checks that the attribute value contains the given value. Since foobar contains foo and it appears first in the DOM we'll return that even thought the user wanted the other target.

This change removes the contains attribute selector and just matches the data attribute value exactly.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors