Prevent component "tag" from being rendered

CanJS
1

I’m creating a bootstrap navbar dropdown component that is rendered as follows:

image

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?

2

Why is breaking the layout? what about making it’s css as:

cs-nav-dropdown {
  display: block;
}

or

cs-nav-dropdown {
   display: inline-block;
}

Depends on how you want it to be rendered.

3

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:

  1. Use partials instead of components. See the docs for can-dynamic-import to see how to do this.

  2. 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 / :+1:s on that.

1 Like
4

@phillipskevin I was writing the same solution for the UL parent :slight_smile:

5

Thanks Kevin,

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.

6

Merci Cherif,

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.