4 ms·

Good article. There is also a nice middle ground with the data-attributes: ``` <div id="myDiv" data-payload="something"></div> ``` These data-attributes are

Good article. There is also a nice middle ground with the data-attributes: ``` <div id="myDiv" data-payload="something"></div> ``` These data-attributes are then automatically available to JavaScript as a read+write property: ``` document.getElementById('myDiv').dataset.payload == "something" ``` However, one has to be mindful that HTML attributes use -kebab-case- while JavaScript uses camelCase. Thus ``` <div id="example-div" data-my-cool-data-attribute="fun"></div> ``` becomes ``` document.getElementById('example-div').dataset.myCoolDataAttribute == "fun" ```

klysm 3y ago
These are also accessible to a degree from css
- vaylian 3y ago
  Cool! What is the syntax for that?
  - domgor 3y ago
    Attributes can be used in selectors like this `div[data-my-data="stuff"]`.
    - wildrhythms 3y ago
      CSS is very powerful here because you can take advantage of the other attribute selectors to find partial matches: div[data-my-data^="my-prefix"] (selects by prefix) div[data-my-data$="my-suffix"] (selects by suffix) div[data-my-data*="my-substring"] (selects by substring) Quite a few more of these: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_s...
  - LorenzA 3y ago
    attr() can also be used to some degree https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr
    - runarberg 3y ago
      The attr() function is actually much more powerful in the spec (perhaps one of my favorite part of unimplemented CSS). According to the spec you can supply the type of the function and use it as value (not just content as of now): <div data-background="lime">Red (but could be lime)</div> div { background: red; } div[data-background] { background: attr(data-background color, red); } So according to the spec, you should be able to control the sizes, color, and even animation timings with (non-style) attributes. In reality though, whenever I think I need this advanced attr() function, I usually just solve the issue using Custom Properties on the `style` attribute: <div style="--background: lime">
lelanthran 3y ago
What does `data--my-cool-attribute` supposed to become?
- jaffathecake 3y ago
  The letter after - is uppercased, and the - is removed. So, `div.dataset.MyCoolAttribute`.
  - lelanthran 3y ago
    Won't that clash in this case, with the version that has double hypens?
    - jaffathecake 3y ago
      I'm talking about your example with double hyphens. It's the initial double hyphen that causes the first letter to be uppercase.
      - lelanthran 3y ago
        > I'm talking about your example with double hyphens. It's the initial double hyphen that causes the first letter to be uppercase. I was asking about the initial example, and made a mistake in the question I asked. To clarify, according to the standards, what do the following transformations result in? data-my--cool-data data-my-cool-data
        jaffathecake 3y ago
        el.dataset['my-CoolData'] and el.dataset.myCoolData respectively
eevilspock 3y ago
MDN article Using data attributes describing HTML syntax, JavaScript access and CSS access, and a caveat about accessibility: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Us... Also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-%2A https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att..., which says: > The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.
- dang 2y ago
  (Belated reply re URL parsing bug) Per https://news.ycombinator.com/formatdoc https://news.ycombinator.com/formatdoc, you can put your URL in angle brackets to override HN's URL parser: <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...> The problem with binding asterisks to URLs is that sometimes the asterisk denotes the opening or (more likely) closing of italicized text, like this: The URL for Hacker News is https://news.ycombinator.com/ https://news.ycombinator.com/ This happens relatively often - here are a few recent examples: https://news.ycombinator.com/item?id=40391982 https://news.ycombinator.com/item?id=40391982 https://news.ycombinator.com/item?id=40324105 https://news.ycombinator.com/item?id=40324105 https://news.ycombinator.com/item?id=40317677 https://news.ycombinator.com/item?id=40317677 Arguably we could deal with this by binding the asterisk to the URL unless it's closing an italicized bit, but this wouldn't resolve the ambiguity completely—for example it wouldn't let you put <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...> inside italics—so it's probably better not to chase the corner cases too hard. The angle bracket notation works, but only if people know about it of course!
keepamovin 3y ago
It’s an interesting and another way to communicate across JavaScript contexts. By contexts here I’m not specifically talking about different Iframes — then it would be beholden to the same origin restrictions and probably have to use postmessage - but I mean in the context of a browser extension, where you create a parallel JavaScript execution context that has access to the same DOM These are also called isolated worlds in the language of the dev tools protocol
SahAssar 3y ago
I really dislike automatic conversion between cases. There does not seem to be any established convention of how to handle uppercase acronyms across all different ecosystems that use camelCase, so ``` document.getElementById('example-div').dataset.myID == "1" ``` becomes: ``` <div id="example-div" data-my-i-d="1"></div> ```
- floydnoel 3y ago
  just treat acronyms as a word, e.g. `myId` instead of `myID`. That's been the standard practice in JavaScript as long as I've been using it at least.
  - jaffathecake 3y ago
    It is for id, but not for acronyms. Eg `innerHTML`. https://w3ctag.github.io/design-principles/#casing-rules https://w3ctag.github.io/design-principles/#casing-rules
    - kevincox 3y ago
      And that isn't even getting to XMLHttpRequest.
      - jaffathecake 3y ago
        Haha, yeah - Isn't limited to XML - Isn't limited to HTTP - The returned object is also the response Beautifully named.
        bandie91 3y ago
        just as well-thought-through as other parts of the web ecosystem, starting at the scripting language designed in a mere week.
        schindlabua 3y ago
deleted 3y ago
[deleted]
wildrhythms 3y ago
I avoid all of the kebab/camel conversions by using the methods: Element.hasAttribute('data-thing') Element.getAttribute('data-thing') Element.setAttribute('data-thing', '...') Much more clear what I'm doing without the awkward translating when I inevitably have to inspect/debug in the DOM.

klysm 3y ago

These are also accessible to a degree from css

vaylian 3y ago
Cool! What is the syntax for that?
- domgor 3y ago
  Attributes can be used in selectors like this `div[data-my-data="stuff"]`.
  - wildrhythms 3y ago
    CSS is very powerful here because you can take advantage of the other attribute selectors to find partial matches: div[data-my-data^="my-prefix"] (selects by prefix) div[data-my-data$="my-suffix"] (selects by suffix) div[data-my-data*="my-substring"] (selects by substring) Quite a few more of these: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_s...
- LorenzA 3y ago
  attr() can also be used to some degree https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr
  - runarberg 3y ago
    The attr() function is actually much more powerful in the spec (perhaps one of my favorite part of unimplemented CSS). According to the spec you can supply the type of the function and use it as value (not just content as of now): <div data-background="lime">Red (but could be lime)</div> div { background: red; } div[data-background] { background: attr(data-background color, red); } So according to the spec, you should be able to control the sizes, color, and even animation timings with (non-style) attributes. In reality though, whenever I think I need this advanced attr() function, I usually just solve the issue using Custom Properties on the `style` attribute: <div style="--background: lime">

lelanthran 3y ago

What does `data--my-cool-attribute` supposed to become?

jaffathecake 3y ago
The letter after - is uppercased, and the - is removed. So, `div.dataset.MyCoolAttribute`.
- lelanthran 3y ago
  Won't that clash in this case, with the version that has double hypens?
  - jaffathecake 3y ago
    I'm talking about your example with double hyphens. It's the initial double hyphen that causes the first letter to be uppercase.
    - lelanthran 3y ago
      > I'm talking about your example with double hyphens. It's the initial double hyphen that causes the first letter to be uppercase. I was asking about the initial example, and made a mistake in the question I asked. To clarify, according to the standards, what do the following transformations result in? data-my--cool-data data-my-cool-data
      - jaffathecake 3y ago
        el.dataset['my-CoolData'] and el.dataset.myCoolData respectively

eevilspock 3y ago

MDN article Using data attributes describing HTML syntax, JavaScript access and CSS access, and a caveat about accessibility: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Us... Also https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-%2A https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att..., which says: > The data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

dang 2y ago
(Belated reply re URL parsing bug) Per https://news.ycombinator.com/formatdoc https://news.ycombinator.com/formatdoc, you can put your URL in angle brackets to override HN's URL parser: <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...> The problem with binding asterisks to URLs is that sometimes the asterisk denotes the opening or (more likely) closing of italicized text, like this: The URL for Hacker News is https://news.ycombinator.com/ https://news.ycombinator.com/ This happens relatively often - here are a few recent examples: https://news.ycombinator.com/item?id=40391982 https://news.ycombinator.com/item?id=40391982 https://news.ycombinator.com/item?id=40324105 https://news.ycombinator.com/item?id=40324105 https://news.ycombinator.com/item?id=40317677 https://news.ycombinator.com/item?id=40317677 Arguably we could deal with this by binding the asterisk to the URL unless it's closing an italicized bit, but this wouldn't resolve the ambiguity completely—for example it wouldn't let you put <https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...> inside italics—so it's probably better not to chase the corner cases too hard. The angle bracket notation works, but only if people know about it of course!

keepamovin 3y ago

It’s an interesting and another way to communicate across JavaScript contexts. By contexts here I’m not specifically talking about different Iframes — then it would be beholden to the same origin restrictions and probably have to use postmessage - but I mean in the context of a browser extension, where you create a parallel JavaScript execution context that has access to the same DOM These are also called isolated worlds in the language of the dev tools protocol

SahAssar 3y ago

I really dislike automatic conversion between cases. There does not seem to be any established convention of how to handle uppercase acronyms across all different ecosystems that use camelCase, so ``` document.getElementById('example-div').dataset.myID == "1" ``` becomes: ``` <div id="example-div" data-my-i-d="1"></div> ```

floydnoel 3y ago
just treat acronyms as a word, e.g. `myId` instead of `myID`. That's been the standard practice in JavaScript as long as I've been using it at least.
- jaffathecake 3y ago
  It is for id, but not for acronyms. Eg `innerHTML`. https://w3ctag.github.io/design-principles/#casing-rules https://w3ctag.github.io/design-principles/#casing-rules
  - kevincox 3y ago
    And that isn't even getting to XMLHttpRequest.
    - jaffathecake 3y ago
      Haha, yeah - Isn't limited to XML - Isn't limited to HTTP - The returned object is also the response Beautifully named.
      - bandie91 3y ago
        just as well-thought-through as other parts of the web ecosystem, starting at the scripting language designed in a mere week.
        schindlabua 3y ago

deleted 3y ago

[deleted]

wildrhythms 3y ago

I avoid all of the kebab/camel conversions by using the methods: Element.hasAttribute('data-thing') Element.getAttribute('data-thing') Element.setAttribute('data-thing', '...') Much more clear what I'm doing without the awkward translating when I inevitably have to inspect/debug in the DOM.