Issue with replace: true & libraries built on top of third party CSS

[wesleycho]

I have a bit of a long term quandary here - I know that replace: true is deprecated, but removing this is a bit of a problematic situation with UI Bootstrap. The library is built on top of Bootstrap's CSS, which enforces a certain HTML structure. The problem with removing replace usage is that this creates an intermediary element, whether the element itself the directive is used on, or an element with the name of the directive if it is used as an element. This is a major issue for any library built on top of third party CSS like UI Bootstrap, and (I am guessing) angular-foundation.

In addition, it prevents users from using certain built in directives with some elements such as ng-class.

Is there any guidance on how we could work around this in UI Bootstrap while removing replace: true usage as recommended? It should be noted that we likely cannot work around HTML structure too much since this would cause a massive pain for those using Bootstrap themes with UI Bootstrap.

[Narretz]

Long term is the right word. Because for 1.x, you don't really have to remove replace, unless it causes bugs. It will only be removed in Angular 2. But then you have a problem.
I think this is something that should be handled by the CSS libraries. They should make their CSS less coupled. I had this problem myself ... bootstrap requires a sibling element for the dropdown. I don't know how you can build something like this.

[Foxandxss]

Thanks for the response Narretz. We wanted to remove replace from uibs but as Wesley said, that will disallow people to theme their app.

I have my own project with a replace bug but in this case it is feasible to rewrite the entire CSS to my needs. Wouldn't be a good idea to do the same with bootstrap :P

[wesleycho]

Closing, as we actually have it mostly figured out with Bootstrap.