We deployed a number of Hawtio plugins (as .war files) to our JBoss Fuse / Karaf server. We noticed that since we are repeating some class and id names for our HTML elements, the CSS behavior of say, plugin A affects the style of another plugin, plugin B, especially when we reference Bootstrap-specific names like col-lg-12 and so on. Furthermore, even if plugin A does not have a bootstrap.css file packaged within it, we are able to use bootstrap-like behavior which seems to be referenced from the bootstrap.css file of plugin B. We realize that ids and classes becomes global to the entire Hawtio environment (we don't know if it's just in CSS alone that this occurs). Any tips on how to remedy this?
Thanks.
At the moment that's really how things are, CSS selectors apply to all elements in the page regardless of how they get there.
A nice solution eventually for this problem will be web components, in a browser with proper support (Chrome and Opera at the moment) you get CSS isolation in a web component, where you can define CSS for elements in your web component and it doesn't leak out and affect other elements. And to style a web component that's in a page you have to use special selectors, so web components aren't affected by global CSS rules.