HTML5 data-attributes

[thosrtanner]

According to MDN, if you create a data-xxxx attribute on an element, you can use element.dataset to access the various attributes you've set ( and this has been available since firefox 6 apparently).

This doesn't seem to be working for me in my extension, which I'm trying to clean up to not put its own attributes in dom elements which it does with cheerful abandon.

Thus this, in the (basilisk) console:

const thing = document.getElementByID("main-window").firstChild;
thing.setAttribute("data-somename", 10);
console.log(thing.dataset);

produces undefined, rather than an object containing a key of somename with a value of "10".

What am I missing?

[vannilla]

Javascript accesses those values from the "dataset" property.
From your link:

Code: Select all

<article
  id="electric-cars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

Code: Select all

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

[thosrtanner]

yes, and that's how I'm attempting to access them.

Code: Select all

const thing = document.getElementByID("main-window").firstChild;
thing.setAttribute("data-somename", 10);
console.log(thing.dataset);

which produces 'undefined'

[vannilla]

Have you tried assigning something directly to dataset?

Code: Select all

let a = document.getElementById('my-fantastic-object');
a.dataset.magic = 85;
console.log(a);

It should print the element as a HTML tag with a data-magic attribute, e.g.

Code: Select all

<p data-magic="85">

It works on a normal webpage at least, but I don't see how it could differ within an extension, unless you are dealing with XUL rather than actual HTML.