data-* attribute selection doesn't work
hesxenon opened this issue · comments
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
- create an element with a data-* attribute
- 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
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 😄
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.
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.
Hi! This was closed. Team: If this was fixed, please add phase/solved
. Otherwise, please add one of the no/*
labels.
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.
👍
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.
@mordechaim you can see here that it does work as expected - the question is: what does your tree look like?
Ah for me the tree is like:
const tree = {
type: "element",
properties: {
name: "foo",
"data-name": "foo"
}
}
@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