bigskysoftware / bigskysoftware/htmx

Support ":host" CSS selector in hx-target

Open
#2,435 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

## 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.

```

#shadow-root


```

POST call would return:

```

```

That would be then generated as:

```

#shadow-root
...

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.