Custom Attributes - Yea or Nay

Custom attributes - Yea or nay?

HTML 5 explicitly allows custom attributes that begin with data. So, for example, <p data-date-changed="Jan 24 5:23 p.m.">Hello</p> is valid. Since it's officially supported by a standard, I think this is the best option for custom attributes. And it doesn't require you to overload other attributes with hacks, so your HTML can stay semantic.

Source: http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

HTML5 custom attributes - Why would I use them?

I assume you're referencing the HTML5 [data-*] attributes.

The advantage is that you can easily associate some scripting data (still semantic, but not for display) with your elements without having to insert inline javascript all over the place, and it will be valid HTML5. To do the same thing in HTML4 would require specifying a custom namespace, and add some namespaced attributes.

Say you've got a list of items for sale, you may want to store the numeric price without trying to parse a string:

<ul>
  <li data-price="5">Item 1 is only $5 this week!</li>
  <li data-price="1">Sale on Item 2, only $1</li>
  ...
</ul>

If you allow your user to mark a number of different items to buy, you can easily pull out the numeric value to display a running total.

Alternatively, you could have put the numbers in a span with a specific class, find the right span on the right item, and pull out the value that way, but [data-*] attributes reduce the amount of markup/script necessary to do the same thing.

If you don't want to use it, you don't need to. There are many ways of associating data with elements, this is just a new one.

Additionally, the new dataset JavaScript API provides a consistent means of declaratively accessing the values stored in [data-*] attributes.

For jQuery users, .data() and .attr() can be used to access [data-*] attributes, and I have written up a detailed answer on when you would want to use one over the other.

Custom Attributes values Javascript

You can use dataset for that purpose. Here is a small demo:

let div = document.querySelector("div");

Object.assign(div.dataset, { water: "Morshinska", juice: "Sandora" });

console.log(div.dataset.water);

div.dataset.water = "Spa";

console.log(div.dataset.water);

console.log(Object.entries(div.dataset)
                  .map(([k, v]) => `${k}: ${v}`)
                  .join("; "));

<div></div>

How to add custom (or outdated) attributes to styled-components?

Ok, I found the solution. Outdated props were filtered by styled-components, and you can override this filter with shouldForwardProp:

const SCTable = styled.table
  .withConfig({
    shouldForwardProp: (prop, defaultValidatorFn) => ['align', 'border'].includes(prop) || defaultValidatorFn(prop),
  })
  .attrs<ITable>(({ cellPadding = 0, cellSpacing = 0, border = 0, align, width }) => {
    return {
      cellPadding,
      cellSpacing,
      align,
      width,
      border,
    };
  })<ITable>``;

Why should I prepend my custom attributes with data-?

There are several benefit for keeping custom attributes prefixed with data-*.

It guarantees there will not be any clashes with extensions to HTML in future editions. This is a problem that has been encountered to some degree already with some of the new attributes introduced in HTML5, where existing sites were using attributes with the same name and expecting different and incompatible, custom behaviour. (e.g. the required attribute on input elements is known to have had some clashes on some popular websites in the past)
There is a convenient DOM API, HTMLElement.dataset, for accessing these attributes from scripts. It is now supported in most browsers.
They provide a clear indication of which attributes are custom attributes, and which ones are standardised attributes. This not only helps validators by allowing them to permit any attribute with data-* while still performing useful error checking for other attributes (e.g. to catch typos), it also helps make this aspect of the source code clearer to those reading it, including people who may work on a website after the original author.

html custom attributes legality

Use data attributes for this purpose. Data attributes are attributes prefixed with data- - this is part of HTML5 and compliant browsers recognize them. Your element would look like

<div data-hoverText="i am hover text" data-hoverTextColor="rgba(0,0,0,0.2)">some other text</div>

Can I add a custom attribute to an HTML tag?

You can amend your !DOCTYPE declaration (i.e. DTD) to allow it, so that the [XML] document will still be valid:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIED means it is an optional attribute, or you could use #REQUIRED, etc.

More information is in DTD - Attributes.

Custom Attributes - Yea or Nay