how to encapsulate ODD rendered document within the website
Currently we're facing diverse problems with encapsulating CSS coming from the surrounding site and those coming from an ODD. It seems we need to address this problem soon as it causes significant overhead and repetitive efforts right now for our current customers.
Assumptions for this discussion:
- users should be completely free to use whatever frameworks they like in the sourrounding website
- CSS used in ODD files MUST not be influenced by the surrounded page
Option a - use plain CSS
Thus the goal must be to scope CSS to the respective area in the page. Plain CSS does not provide this functionality out of the box. There might be ways to emulate such a scoping but introducing special matchers that only hit the embedded document but those require to adhere to the convention and are not fully failsafe. Same is true for any approach using higher precedence of matchers for ODD generates styles. We cannot really make sure that there will be no rule in the outer site CSS that overrules the ODD CSS.
Option b - use webcomponents
While in principle webcomponents can be a way to solve this issue this requires to re-implement significant parts (at least the document rendering 'component') and we still need to test in practice if the promise holds true or if we're facing glitches in browser implementations or Polymer. We also have to watch the overall pageload and possible interference of 'site JS' and Polymer. In the long term this is the desirable solution but we'll have to weight the effort against the other options now and see how our way to this solution might look like. Webcomponents are still 'tomorrows' technology' so some caution is necessary.
Option c - use an iframe
An iframe on the other hand is a safe way to achieve the goal with relatively low effort. It truly encapsulates the rendered document within the site layout. Furthermore it also provides JS encapsulation as we don't want JS used in the site to interfere with JS used in the document rendering part. While there are definitely disadvantages using iframes (bookmarking) these might be solveable. The iframe approach might also be considered as a pathway to a longer-term solution building on web components.
This ticket is intended to gather arguments and help us to decide about the current approach so please comment.