this small but powerful addition allows a user of the element to define
a custom <style> element inside of the custom element, which is then
moved in to the Shadow DOM. The <style> tag can define arbitrary CSS of
course, but the main (and supported) way of using it is to override CSS
variables to customize the styling of the element.

Example:

<ge-autocomplete …>
	<style>
	  :host {
	    --input-bg: salmon;
	    --loading-color: red;
	  }
	</style>
</ge-autocomplete>

this is the second (after CSS), very powerful customization feature: it
allows a user of the element to define a <template row> tag inside the
custom element, and inside of that they can create HTML markup as well
as access the data of the row (the Feature) through the lodash template
language.

Example:

<ge-autocomplete …>
	<template row>
	  <div>${feature.properties.gid}: ${feature.properties.name}</div>
	</template>
</ge-autocomplete>

this template allows customization of the way a Feature is converted
into a string and can be used for "smaller" customization where a fully
new template with custom styles would be overkill.

Also this applies to the resulting string that is placed in the input
field after an item is selected.

this commit also refactors the way templates are passed to parse them
both in a single function instead of duplicating the logic. This also
allows easily adding more templates in the future.

Co-authored-by: Julian Simioni <orangejulius@users.noreply.github.com>

by moving the actual feature data one level down we can add metadata to
the top level of the object, such as `active`, `index`, and
`searchTerm`, so the template can use

${item.feature.properties} ${item.active}

that way the meta properties don’t conflict with the geo data itself