Bootstrap: Dynamic Tabs, where href starts with number, not working

[PackeTsar]

Example: https://jsfiddle.net/wcq4L2fr/1/

When the nav-link href starts with a number, or is only a number (<a class="nav-link" data-toggle="tab" href="#1">), it will not expose the referenced contents (<div class="tab-pane fade" id="1">).

If the nav-link href is simply alpha, or begins with an alpha character, it works fine.

[PackeTsar]

This may be a duplicate of #1956, but it doesn't seem the issue was resolved there

[patrickhlauke]

this falls under the same umbrella as this https://github.com/twbs/bootstrap/issues/31005

short version: HTML5 now allows ids to start with a number. but then when you use them in your CSS, or in JS when using things like querySelector (which under the hood BS uses), you'd need to do extra work to escape these id references first. BS currently doesn't do that (and hints at this with https://getbootstrap.com/docs/4.5/getting-started/javascript/#selectors), but admittedly this could be made clearer / BS could try and auto-escape references in its functions.

the workaround for now is to stick to ids that follow https://www.w3.org/TR/CSS21/syndata.html#value-def-identifier

[XhmikosR]

I'm not sure what we can do in the JS side to allow this? Personally, I always follow the specs in all my projects so I never had the need for such thing.

[patrickhlauke]

but the point is the HTML specs now allow things like id="1". it's the CSS spec that hasn't caught up with it properly. (edit: see https://mathiasbynens.be/notes/html5-id-class)

in terms of how, one approach would be to run any selector passed to BS' own functions (that expect a CSS selector) through an encode step (to encode the problematic characters - see https://mathiasbynens.be/notes/css-escapes) before passing the cleaned/encoded selector to things like querySelector

[XhmikosR]

You are welcome to look into it. As long as we follow the specs, and we can fix this on our side without lots of code, I don't see why not adding support for this.

[Johann-S]

Being able to use the native: CSS.escape would be the best option, but not really supported currently

[ffoodd]

@Johann-S Just checked on MDN and CanIUse, support is pretty good. Only missing Legacy Edge, for v5…

Also Mathias Bynens wrote a lightweight polyfill (only 3.43kb unminified): might it be used?

[XhmikosR]

I guess this is one of the reasons we should consider regarding dropping Legacy Edge support.

[mdo]

Let's drop it then :). We've been teetering on the decision for awhile now, I think Alpha 3 is the time to do it.

[XhmikosR]

Now with Legacy Edge dropped, any PRs to switch to CSS.escape are welcome!