Polymer

Question

我正在使用条件模板来分发传递到元素中的内容。如果条件为真，它将显示第一个内容元素，否则显示第二个。我注意到当我更新条件时，已经分发的内容没有更新。一旦可见，它将保持可见。我的第一次尝试是这样的：

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

我注意到如果内容包含在另一个元素中，它会起作用。

<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>

我创建了一个 plunker 来演示这两种情况。这种行为有解释吗？是故意的还是 bug？

Answer 1

这实际上是每个设计。这是 Polymer 团队在 Github 上的 issue 上不得不说的话。

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.

Polymer - 在条件模板中嵌套内容标签

Polymer - Nesting a content tag inside a conditional template

polymer-1.0