Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

data-* attribute does not support number #2329

Closed
chengyin opened this issue Oct 12, 2014 · 8 comments
Closed

data-* attribute does not support number #2329

chengyin opened this issue Oct 12, 2014 · 8 comments

Comments

@chengyin
Copy link

If the data attribute is formatted as data-{number}-*, then it won't be rendered into the HTML.

Example:
http://jsfiddle.net/1etmp5fn/

Notice that data-100-bucks does not show up in the rendered result, while data-bucks-100 does.

@syranide
Copy link
Contributor

While most browsers tend to parse data attributes starting with a number, it is actually not valid according to W3. The most likely reason being that {100Bucks: ''} is not valid, but {bucks100: ''} is (and same is obviously true for variables).

See:
http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes
http://www.w3.org/TR/xml/#NT-Name

Closing, reopen if you disagree.

@Prinzhorn
Copy link

I've read the two links you've posted and I'm not sure where exactly the spec disallows numbers.
The first link says

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no uppercase ASCII letters.

Let's see what "XML-compatible" means (quoting http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#xml-compatible)

Attribute names are said to be XML-compatible if they match the Name production defined in XML and they contain no ":" (U+003A) characters.

What is the "Name production"? This is where your second links comes in, the EBNF rules for "Name". It's correct that NameStartChar does not include numbers, but the "Name" in this case starts with data-, not the number.

That being said, data-100 is a valid XML attribute and contains at least one character after the hyphen. It also does not contain uppercase ASCII letters and is in no namespace.

@zpao
Copy link
Member

zpao commented Nov 6, 2014

It's valid. We forced some stricter guidelines than the spec does because we thought the spec was poor and we wanted people to have better practices. There may have been some issues with browser support earlier but I can't recall. Anyway, the choice hasn't been a real problem before. But we're more popular now and should make spec-compatible things work unless we have something better. Hopefully we'll make dataSet as a prop work instead someday soonish.

@zpao zpao reopened this Nov 6, 2014
@zpao
Copy link
Member

zpao commented Nov 6, 2014

One place where I think we'll keep deviating is the allowance of upper case data attrs in html. as noted in the link they get lowercased by parsing rules anyway so they're technically fine to use, but it's confusing behavior going from JS<-->DOM so we'll be noisy there.

@syranide
Copy link
Contributor

syranide commented Nov 6, 2014

That being said, data-100 is a valid XML attribute and contains at least one character after the hyphen. It also does not contain uppercase ASCII letters and is in no namespace.

@Prinzhorn You are indeed correct. I don't think there's any reason in particular not to allow it so we probably should change it then I would think.

but it's confusing behavior going from JS<-->DOM so we'll be noisy there.

@zpao But that's how the HTML5 spec defines dataset so it's not really "our problem"? :) (Or did the PR to change it to use "hyphenation" get dropped?)

@Prinzhorn
Copy link

Thanks guys!

@franleplant
Copy link

what is the state of this?

@zpao
Copy link
Member

zpao commented Oct 15, 2015

No update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants