Generated ids starting with 0-9 are not valid as CSS selectors/classes

[brennanyoung]

Subject of the issue/enhancement/features

I notice that all those long generated hexy-looking ids, while legal in HTML, are actually not valid CSS selectors if they begin with anything but an alphabetical character. So something like document.querySelector(referenceToSomeGeneratedAdaptId) appearing in a custom component is likely to throw a DOMException.

A safer approach would be to ensure that the generated ID begins with a character which is a legal starting character for CSS selectors.

Steps to reproduce

Make some content (e.g. in authoring tool, or just with framework) such that an ID is generated.
Make a bare bones custom component (or just a few lines of js, or even a one-liner in the console) which uses querySelector to hook up to that ID.

Expected behaviour

querySelector/querySelectorAll should accept all generated IDs without causing a DOMException.

Actual behaviour

In many/most cases, the ID will begin with a numeral (0-9), causing a DOMException, although it's hexadecimal, so there's a smaller chance it starts with a-f, which is legal as a CSS selector.

[moloko]

I propose that we drop these altogether in Adapt Framework v6. We have had the data-adapt-id attribute (that contains the page/article/block/component id) in place for a while now, people should switch to targetting that or using the _classes attribute to add custom styling.

[moloko]

Just to note this also causes a bug with Adapt.navigateToElement.

From the menu, Adapt.navigateToElement('co-05'); should take you to page co-05 but instead it just scrolls to that menu item.

Definitely remove these IDs in Adapt v6!