Thank you for your comment but I do not think your suggestion is applicable. We could use the data attribute to provide an identifier for a DOM element and use it to style it in CSS. It would be less Specific than an id attribute but still dedicated to styling the specific element, especially when the value of the attribute is included and assuming it is unique.

As for selecting DOM elements in JS code, using the data attribute would still require using the querySelector method, in fact that would be the only way as there is no getElementByAttribute method.

All that said, your comment has set me thinking about a couple of things (thank you).

1, Referencing DOM elements directly is generally not useful when using a JS framework that employs a virtual DOM because the reference is likely to be lost with subsequent updates of the DOM.

2, The fact that by prefixing the dollar symbol to an id attribute invalidates it as a CSS select also means we would be unable to use the querySelector method even if we wanted to. However, one of the benefits of using the prefix is we should not need either document method to select the element, it will already have been done.

Going back to my first thought, I have prepared a GitHub gist to demonstrate the point.

Thanks again for your comment, much appreciated.

Ali, Thanks for your comment. As requested, here is what I think.

Within the web browser the window object equates to globalThis, which is how the properties can be referenced within the global namespace and without direct reference to window.

window === globalThis  // true

window.document === document  // true

window['document'] === document  // true

window['localStorage'] === window.localStorage  // true

Thus it would be unwise to give a DOM element an id of localStorage. After selecting an element in the DOM using the developer tools ($0) it is possible to edit the element as HTML and add an attribute of id and set to localStorage. After that, the following tests get interesting.

$0  // <section id=​"localStorage">​</section>​

$0.id  // 'localStorage'

$0.id === window.localStorage  // false
$0.id === window['localStorage']  // false

localStorage === window.localStorage  // true - Not the DOM element $0.
localStorage === window['localStorage']  // true

$0 === localStorage  // false

However, there are no window properties that start with a dollar symbol. So, as my post suggested, using a dollar prefix for ids serves a number of purposes:

1. Virtually no change of namespace conflict with window properties.
2. Styling the element using its id (#$elementId) is not possible because CSS selectors cannot start with a dollar.
3. In addition, the prefix denotes variables as referencing a DOM element, which is useful.

I am not sure your comment about using unique names is valid as there is nothing to assert uniqueness. However, it would be easy to have a JS function to check for duplications.

  function checkElementsForDuplicateIds(target = document.body) {
    const elementsWithIds = [...target.querySelectorAll(`[id]`)].map(el => el.id);
    const uniqueIds = [...new Set(elementsWithIds)];
    const duplicateIds = uniqueIds.filter(id => elementsWithIds.filter((elId) => elId === id).length > 1);
    if (duplicateIds.length) {
      console.error(
        `Error, there are elements with duplicate id attributes: ${duplicateIds.join(
          ', '
        )}.`
      );
    }
  }