I just downloaded 1.9.1 version of jQueryUI. Since I will be using it in an extension, I do not want to mess up with a webpage's CSS if the page is also using jQueryUI. So I added CSS scoping name. Now I see that in the downloaded jQueryUI CSS file, only the part after "Component containers" is scoped by my class. The parts before that are not scoped by my class.
I was using an earlier version of jQueryUI 1.8.24. In that version, everything was scoped using my class. However, "tabs" was not working in that version (when I inspected the generated HTML elements, I saw that certain attributes such as "role" were not getting added to HTML elements that are part of "tabs" functionality, whereas in the example code, w/o CSS scoping, such attributes got added. Hence probably it was not working).
So here I am, with one version where tabs, accordion and dialog work with CSS scoping but that scoping seems to start arbitrarily and does not apply to all rules (thus putting my extension users in the danger of having inconsistent experiences on pages that use jQueryUI) .. and with another version where CSS scoping works but not all widgets work.
I am thinking perhaps jQuery UI is not such a good choice after all. Any comments? Is there a better framework with widgets for extensions where I can separate CSS rules with correct scoping?