# Prevent component "tag" from being rendered

**URL:** <https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753>\
**Category:** CanJS\
**Created:** [November 13, 2017, 6:39pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753 "2017-11-13T18:39:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 13, 2017, 6:39pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753/1 "2017-11-13T18:39:26Z")

</div>

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

![image](https://canada1.discourse-cdn.com/flex035/uploads/donejs/original/1X/53c8346e7f35744d003e9026bf68d538dd244ec2.png)

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?

---

<div class="post-metadata">

**Author:** ![cherif\_b](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/cherif_b/32/31_2.png) [@cherif\_b](https://forums.bitovi.com/u/cherif_b)\
**Post date:** [November 14, 2017, 4:12pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753/2 "2017-11-14T16:12:37Z")

</div>

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

```css
cs-nav-dropdown {
  display: block;
}

```

or

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

```

Depends on how you want it to be rendered.

---

<div class="post-metadata">

**Author:** ![phillipskevin](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/phillipskevin/32/102_2.png) [@phillipskevin](https://forums.bitovi.com/u/phillipskevin)\
**Post date:** [November 14, 2017, 4:25pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753/3 "2017-11-14T16:25:11Z")

</div>

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](https://canjs.com/doc/can-view-import.html#_can_dynamic_importfrom __MODULE_NAME_value_to___ MODULE_REF___) to see how to do this.

2. Use [`can-view-callback.attr`](https://canjs.com/doc/can-view-callbacks.attr.html) instead of components.

There is also an [open issue](https://github.com/canjs/can-component/issues/95) for supporting this in can-component if people want to add comments / 👍s on that.

---

<div class="post-metadata">

**Author:** ![cherif\_b](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/cherif_b/32/31_2.png) [@cherif\_b](https://forums.bitovi.com/u/cherif_b)\
**Post date:** [November 14, 2017, 4:27pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753/4 "2017-11-14T16:27:55Z")

</div>

@phillipskevin I was writing the same solution for the UL parent 🙂

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 14, 2017, 6:41pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753/5 "2017-11-14T18:41:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eben\_roux](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/eben_roux/32/380_2.png) [@eben\_roux](https://forums.bitovi.com/u/eben_roux)\
**Post date:** [November 14, 2017, 6:43pm UTC](https://forums.bitovi.com/t/prevent-component-tag-from-being-rendered/753/6 "2017-11-14T18:43:21Z")

</div>

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.