Joomla backend issue Bootstrap 2

Question

I'm currently developing a component that requires Bootstrap 3 but, the limitation of the backend's ISIS template using Bootstrap 2 is a hindrance. I've tried:

1. Backend template override: this doesn't work as the backend override only works for anything between the tag and not (where the bootstrap dependencies are loaded).
2. Shadow DOM: This doesn't work as bootstrap needs to load dependency through the tag and Shadow DOM doesn't use a tag.

The only option I could use is IFRAME but, this is a very dirty way which is ripe with security issues.

Any thoughts how I can solve this issue?

Answer 1

If the component is private, I'd follow David Taiaroa's advice. If it's for distribution that might not be possible.

Joomla v4 is not far away, and will upgrade both admin and site to Bootstrap v4, as far as maintainability issues in your approach.

The template override approach has the problem that you can't use Bootstrap v2 and v3 together in the same page, as they have name collisions. I think there is a way to do it - it seems to me that Jomsocial did when they started using v3 at the time that v2 was common in Joomla front-end templates. I'd guess they renamed everything throughout the Bootstrap code (css and javascript) and then namespaced it to their own vendor name, but don't know.

You can get at the Bootstrap rendering functions. Joomla uses a layout system mapped to Bootstrap classes (and other Joomla widgets), and you can override those layouts. The class is JLayout. The JHTML class might be relevant also, I think there was a move away from it between Joomla 2.x and 3.x.

I don't share your pessimism about iframes. The scenario here is serving an iframe from a trusted domain. The security issues with iframes concern your website being embedded in an iframe on a hostile domain (for traffic sniffing), and third-party (untrusted) providers serving iframe content on your site. They can be abused by malicious code injected onto your site (XSS), but this concerns that malicious code creating its own iframe for abusive ends. Your top-level document is essentially an iframe; there's no reason not to divide up the canvas as you see fit if it meets your needs.

I don't understand your reason for not being able to use web components (shadow DOM). The downside is pushing your HTML templating into the Javascript for those areas, via .attachShadow() and subsequent .innerHtml() calls. You could load and namespace the Bootstrap v3 CSS and Javascript and use it in web components this way.

Answer 2

Rather than trying to make Bootstrap 3 work with the ISIS template, why not find a new template that uses Bootstrap 3?