IssueRaiser

Make custom attribute rules consistent with custom element name rules

Related WICG discussion: https://discourse.wicg.io/t/relaxing-restrictions-on-custom-attribute-names/1444 Currently, custom attributes need to start with `data-`. For frameworks with a lot of attributes (Angular, Vue etc), this introduces a serious problem: Either they prefix all attributes with `data-` and become prone to collisions with other libraries (I've even had two of **my own** libraries collide!), or they make them extremely verbose (`data-ng-*`), or they make them non-standard (`ng-*`, `v-*`), which is their chosen solution. I'm about to release a library with a lot of attributes and I went for the latter as well. The former two pose serious practical problems, the latter is just conformance. However, it doesn't have to be this way. Custom elements allow any element name with a hyphen in it, we could do the same for attributes. The cowpaths have been paved: Several very popular libraries follow this practice already. This is not true for proposals like #2250, which introduce a completely new naming scheme. The main issue with this is all the existing attributes in SVG that come from CSS properties which use hyphens. However, there are several solutions to deal with this: - Exclude these prefixes, or just these names. The SVG working group is dying and these attributes must be manually added to the spec, there's no clause that says all CSS props must automatically be available as attributes. - Only allow prefixes of 1 or 2 letters. This gives us 26*26 + 25 = 701

Posted by LeaVerou on Jan 17, 2017, 3:04 PM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments

github (Other)

Make custom attribute rules consistent with custom element name rules

LeaVerouJan 17, 2017, 3:04 PM

Related WICG discussion: https://discourse.wicg.io/t/relaxing-restrictions-on-custom-attribute-names/1444 Currently, custom attributes need to start with `data-`. For frameworks with a lot of attributes (Angular, Vue etc), this introduces a serious problem: Either they prefix all attributes with `data-` and become prone to collisions with other libraries (I've even had two of **my own** libraries collide!), or they make them extremely verbose (`data-ng-*`), or they make them non-standard (`ng-*`, `v-*`), which is their chosen solution. I'm about to release a library with a lot of attributes and I went for the latter as well. The former two pose serious practical problems, the latter is just conformance. However, it doesn't have to be this way. Custom elements allow any element name with a hyphen in it, we could do the same for attributes. The cowpaths have been paved: Several very popular libraries follow this practice already. This is not true for proposals like #2250, which introduce a completely new naming scheme. The main issue with this is all the existing attributes in SVG that come from CSS properties which use hyphens. However, there are several solutions to deal with this: - Exclude these prefixes, or just these names. The SVG working group is dying and these attributes must be manually added to the spec, there's no clause that says all CSS props must automatically be available as attributes. - Only allow prefixes of 1 or 2 letters. This gives us 26*26 + 25 = 701

Comments (0)

No comments yet. Start the discussion.

Comment on this issue