Polymer - Nesting a content tag inside a conditional template

Question

I'm using a conditional template to distribute content that is passed into the element. If the condition is true, it will show the first content element, otherwise the second. I noticed that when I update the condition the already distributed content is not updated. Once it is visible it will remain visible. My first attempt looked like this:

<template is="dom-if" if="{{test}}">
    <content select=".first">
    </content>
</template>
<template is="dom-if" if="{{!test}}">
    <content select=".second">
    </content>
</template>

I noticed that it will work, if the content is wrapped in another element.

<template is="dom-if" if="{{test}}">
    <div>
        <content select=".first">
        </content>
    </div>
</template>
<template is="dom-if" if="{{!test}}">
    <div>
        <content select=".second">
        </content>
    </div>
</template>

I've created a plunker that demonstrates both cases. Is there an explanation for this behaviour? Is it on purpose or a bug?

Answer 1

This is actually per design. Here`s what the Polymer team had to say on the issue on Github.

Hiding a <content> has no effect on the visibility of its distributed children (per spec), so your options are to wrap the content with a wrapper element that can be hidden (and will hide the distributed children), or use restamp which will pull the <content> out of the DOM all together. It is slightly unintuitive that the restamp and non-restamp setups work differently, however it is a result of the non-restamp behavior which hides rather than destroying DOM as a performance optimization.