A solution exists to isolate parts of your application from others : Iframes. Currently I’m working on a requirejs plugin to sandbox your application with iframes (and privileges separation) and a framework using this solution. I’ll probably write a post about that :)
But there is better and something I’m really excited about : Shadow DOM and CSS scoped. Both address the lack of encapsulation I explained.
What is Shadow DOM?
The shadow DOM allows multiple DOM trees (in addition to the document tree) to be composed into one larger tree when rendered…
To sum up, you can create shadow roots. A shadow roots associated to an element is called shadow host which can contains child nodes. Those child nodes aren’t exposed in the traditional DOM tree and can’t be modified!
With shadow host you can easily separate the content from the presentation and some other stuff. I invite you to read this tutorial.
What is CSS scoped?
The scoped attribute is a boolean attribute. If set, it indicates that the styles are intended just for the subtree rooted at the style element’s parent element, as opposed to the whole Document.
It allows developers to apply styles to only the host element and descendant elements (it overrides the document stylesheet but not inline styles). Here’s some useful links:
Scoped css : http://davidwalsh.name/scoped-css
Saving the day with scoped css : http://css-tricks.com/saving-the-day-with-scoped-css/
The scoped attribute : http://html5doctor.com/the-scoped-attribute/
I will update my css-bundle github repo with an example of scoped css.