I have a widget developed with ext-js that can be embedded on any page. Unfortunately when adding the widget to a CMS page the .x-border-box (and many others) style is applied from the root html tag through the whole document.
Some sort of scoping for CSS seemed to be available in 4.1.7 however this has been removed from 4.2.0. My approach is to allow the page to load, then to manually remove the automatically applied classes, and apply to only the required area.
<!-- The above ID must be removed as it can not be added through the content management system -->
<!-- stuff -->
<!-- stuff from content management system -->
// Remove .x-border-box class from whole document starting at html tag
var el = Ext.get("dummyID");
// more code to dynamically apply .x-border-box class to all content inside the container div
<!-- more stuff from content management system -->
- Is my approach appropriate or is there a better way?
- If this is a good approach, then I will have to be able to access the root html tag. the seems to return an object but unfortunately I've not been able to apply the above to the result. How can I get a handle on the html tag to remove the class?