change name of searchWith attribute to data-searchWith

[rouilj]

One thing to check is that attributeChangedCallback is called when data-searchWith is changed.

Idea from: https://adactio.com/journal/21078

=== Naming attributes

You can use any attributes you want on a web component. You made up the name of the custom element and you can make up the names of the attributes too.

I’m a little nervous about this. What if HTML ends up with a new global attribute in the future that clashes with something I’ve invented? It’s unlikely but it still makes me wary.

So I use data- attributes. I’ve already got a hyphen in the name of my custom element, so it makes sense to have hyphens in my attributes too. And by using data- attributes, the browser gives me automatic reflection of the value in the dataset property.

Instead of getting a value with this.getAttribute('maximum') I get to use this.dataset.maximum. Nice and neat.

===

[patel-malav]

I have renamed searchWith to data-search-with as data- attributes will be camelcased so data-search-with is accessible with dataset.searchWith.

The only other change that was required was to update a static class property observerAttributes to include data-search-with

[patel-malav]

commit 6f2e0380a688ce6cdeb76408f3f22abd5f6d26fb has the refactored changes

[rouilj]

LGTM.