Created by: Hiws
This is a rough draft, of a possible simple solution to support HTML5 ID's in combination with the various JS plugins.
This allows the user to use non-alpha characters as the first character in the ID, which is currently not possible.
Basic example of what will be possible:
<a class="nav-link" data-toggle="tab" href="#1-tab">Tab 1</a>
<div class="tab-pane fade" id="1-tab">
Content
</div>I've tested Modals, Tabs, Scrollspy, Carousel and Collapse locally via the docs, and it appears to function correctly, but will definitely need more testing to ensure it works across supported browsers and environments.
My knowledge of all the ways the plugins above can be used is limited, which is why I'd love some input whether the current draft makes sense.
The selector is escaped using the built-in CSS.escape, function. However, I don't think this is supported in Legacy Edge. So a different solution might be needed here.
Alternatives to native CSS.escape:
- https://github.com/mathiasbynens/cssesc - Standalone function (with more features?)
- https://github.com/mathiasbynens/CSS.escape - A direct polyfill
- Write a standalone function specific to Bootstrap