Repository navigation
Generated ids starting with 0-9 are not valid as CSS selectors/classes #2739
Description
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.
Activity
moloko commentedon Oct 19, 2020
I propose that we drop these altogether in Adapt Framework v6. We have had the
data-adapt-idattribute (that contains the page/article/block/component id) in place for a while now, people should switch to targetting that or using the_classesattribute to add custom styling.moloko commentedon Apr 15, 2021
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!
[-]Generated ids starting with 0-9 are not valid as CSS selectors[/-][+]Generated ids starting with 0-9 are not valid as CSS selectors/classes[/+]