I’m creating a bootstrap navbar dropdown component that is rendered as follows:
Is there some way to not render the <cs-nav-dropdown items:from="items"> bit as it appears that it is breaking the css layout?
Why is breaking the layout? what about making it’s css as:
Depends on how you want it to be rendered.
I think it breaks because Bootstrap expects the <li> to be children of the <ul>, and this has the component element in between.
We kind of discussed this on Gitter, but in case anyone else comes across this problem there are a couple possible solutions:
Use partials instead of components. See the docs for can-dynamic-import to see how to do this.
Use can-view-callback.attr instead of components.
There is also an open issue for supporting this in can-component if people want to add comments / s on that.
@phillipskevin I was writing the same solution for the UL parent
The open issue does seem to point to a slightly different use-case though. From what I can tell it seems as though folks would like to instantiate a component from an existing/standard html tag and not necessarily have a “tag-less” node. I understand why this is done as discussed with Brad (tearing down bindings etc. when the node is removed). When I last used Ember they were rendering a <script> tag if memory serves. This also “broke” the css.
I’ll go with Frank and Cherif’s suggestion of massaging the css.
I’ll add a bit of css to fix the layout. Pretty simple fix and I guess it probably is the most elegant for now. Don’t quite think the component nodes are going to be disappearing from the dom all too soon.