Can I store custom attributes in HTML DOM like a database record?

Question

When developing for browsers FF3 and IE6/7 with jQuery, are there any compatibility issues when setting custom attributes on HTML tags?

First, I'm aware of jQuery's data() function and it essentially does what I want, but the data doesn't survive a clone() function. This is an issue when using the jQuery UI draggable/droppable plugins because it clones DOM elements during a drag/drop. For the purpose of this question, I need an alternative to data().

I want to persist data between drag/drop operations. I want to be able to inject data into the DOM element that is moved during a drag/drop operation. To do this, I can build HTML child elements to simulate a database record. Quick experimentation shows that Firefox has no issues utilizing any attribute names I want to store fields of data. However, the HTML 4 spec says that certain tags can only contain certain attribute names. Will populating the DOM with nonstandard attributes cause incompatibility issues with the browsers I've mentioned?

Answer 1

Take a look at this similar question I asked a while back: Can I just make up attributes on my HTML tags?

Personally, I don't really like the suggested answers of putting all your data into the class attribute. It feels, just... wrong you know? In my experience, though your page won't be valid if you make up attributes, I just do it anyway. Test it in the 4 major browsers and if it works, who cares?

The best solution which i can think of is one which isn't valid now, but will be in HTML5, so that's good. As suggested by ms2ger in that other question, prefix your custom attributes with data-

http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#embedding-custom-non-visible-data