dylang / shortid

Short id generator. Url-friendly. Non-predictable. Cluster-compatible.

Home Page:https://www.npmjs.org/package/shortid

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ShortID does not generate CSSSelector id friendly

gabycperezdias opened this issue · comments

As can be seen in this (https://medium.com/front-end-weekly/css-selector-for-element-which-have-numbers-as-class-name-b6a089989199) for an ID to be cssSelector friendly it must start with a letter, an underscore or a hyphen.
This causes some issues such as (https://stackoverflow.com/a/51396346/3326192) where querySelector, native from javascript that uses a CSS Selector, does not work when the ID starts with a number.

Currently I can't find a way to work around this, mainly because, even if I try to remove all numbers from the set of chars I would have to replace all of them with special chars since the characters method needs to have 64.

Could you please help me? Thanks

Hi. Unfortunately shortid is deprecated (because the architecture is unsafe), don’t use it. Move it Nano ID (Nano ID is also 10 times faster than shortid).

Here is advice in Nano ID docs about using it with HTML/CSS IDs: https://github.com/ai/nanoid/#react

<input id={'id' + this.id} type="text"/>

We can’t remove digits and hyphen/underscore from ID since it affect symbol distribution and make ID less safe.