Support ":host" CSS selector in hx-target

[andrejota]

What

Ability to select shadow root host element as a hx-target using :host would be handy. To the best of my understanding I would have to either assign ID to the host element to make it selectable using hx-target="global host-element-id" or write JS code to add ID to the host element if it doesn't have one already and then generate correct value for hx-target when building DOM for the web component.

Both is doable, but I think it would be handy to be able to use hx-target=":host" as well. I already have a fairly trivial code that does it, but I don't know if there are other ways of achieving same that are as simple to use. Thus an issue first and if the proposal is viable, I can follow up with a pull request.

Example

Generated HTML, custom-component is a custom web component with open shadow root.

<custom-component>
  #shadow-root
    <form name="foo" hx-post="/custom/component" hx-target=":host">
      <input type="text" name="text">
    </form>
</custom-component>

POST call would return:

<custom-component></custom-component>

That would be then generated as:

<custom-component>
  #shadow-root
    ...
</custom-component>