data-* attribute selection doesn't work

[hesxenon]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

hast-util-select@6

Link to runnable example

https://jsbin.com/lihidasupa/1/edit?html,console

Steps to reproduce

1. create an element with a data-* attribute
2. try to find it with an attribute selector

Expected behavior

Element should be found

Actual behavior

Element isn't found

Affected runtime and version

chromium@Version 121.0.6167.85 (Official Build) Arch Linux (64-bit)

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

No response

[hesxenon]

hello there, it's me again :P just tried to find an element based on a data-* attribute and it's not being found.

I'm starting to think you have some issue with dashes 😄

[wooorm]

Hi again!

yes, in hast, the properties are camelcased.
This behavior is expected, and I’m pretty sure even tested.
So the element is wrong. Why are you getting dashes in props?

A lot of our previous conversation applies here. About jsx. About what hastscript does.

[hesxenon]

ah dang it, I mixed up the camelcasing. You see, I had that thought as well but didn't change the property to camelcase in the test setup but the selector 🤦‍♀️.

I'm getting the dashed properties for the same reason as in the other issue - because I'm explicitly assigning them as a workaround for the "2nd argument type value" problem.

Anyway, in that case I think this issue can be closed because it either doesn't apply to this repo or because I can fix it on my end. Sorry for the interruption.

[wooorm]

because I'm explicitly assigning them as a workaround for the "2nd argument type value" problem.

This was already solved! You can run npm update

Anyway, in that case I think this issue can be closed because it either doesn't apply to this repo or because I can fix it on my end. Sorry for the interruption.

👍

[mordechaim]

I'm not sure I follow. Using data-* props is quite standard and works with the dash in JSX as well (it's not camel cased). But I cannot seem to select them even with the latest version of hast-util-select.

Using [dataName] for instance, doesn't work either, so there's no way of selecting at all with data attributes.

[hesxenon]

@mordechaim you can see here that it does work as expected - the question is: what does your tree look like?

[mordechaim]

Ah for me the tree is like:

  const tree = {
    type: "element",
    properties: {
      name: "foo",
      "data-name": "foo"
    }
  }

[ChristianMurphy]

@mordechaim properties are camel cased.
If you are manually injecting the node, it should look like:

  const tree = {
    type: "element",
    properties: {
      name: "foo",
      "dataName": "foo"
    }
  }

You can use a hast parser on a real document to see what properties should look like, for example: https://stackblitz.com/edit/github-b1fwzc?file=src%2Findex.ts