Polymer 有条件地包装<；内容>；聚合物中的插入点

我正在尝试制作一个聚合物元素，它是一个简单的盒子或容器，包含三个主要元素：页眉、正文和页脚。页眉和页脚是可选的，但是如果它们在那里，我想在它们周围放一些东西

我的问题是如何将包装器元素放置在插入点周围，该插入点仅在select属性与某个内容匹配时出现

我的代码是这样的（不起作用）：

有没有办法根据插入点的选择是否匹配，有条件地换行插入点？也许我在这件事上完全错了。谢谢

编辑：多亏了Fuzzical Logic的帮助，这就是我的修订版的样子，它使用lodash进行集合筛选，只选择直接子项的页眉和页脚类：

<polymer-element name="example-card" attributes="">
    <template>
        <paper-shadow z="1">
            <div vertical layout>
                <template if="{{showheader}}">
                    <div class="card card-header">
                        <content id="header" select=".header"></content>
                    </div>
                </template>
                <div class="card card-body">
                    <content select=":not(.footer)"></content>
                </div>
                <template if="{{showfooter}}">
                    <div class="card card-footer">
                        <content id="footer" select=".footer"></content>
                    </div>
                </template>
            </div>
        </paper-shadow>
    </template>
    <script>
    Polymer({

        domReady: function () {
            // Doesn't work in IE11...
            // this.showheader = this.querySelector(':scope > .header');
            // this.showfooter = this.querySelector(':scope > .footer');

            this.showheader = _.filter(this.children, function(e) { return e.className === "header"; }).length;
            this.showfooter = _.filter(this.children, function(e) { return e.className === "footer"; }).length;
        },
        publish: {
            showheader: {
                value: false,
                reflect: true
            },
            showfooter: {
                value: false,
                reflect: true
            }
        }

    });
    </script>
</polymer-element>

聚合物({
domReady:函数（）{
//在IE11中不起作用。。。
//this.showheader=this.querySelector（':scope>.header'）；
//this.showfooter=this.querySelector（':scope>.footer'）；
this.showheader=\.filter（this.children，函数（e）{returne e.className===“header”；}）；
this.showfooter=\.filter（this.children，函数（e）{returne e.className===“footer”；}）；
},
出版：{
显示标题：{
值：false，
反映：正确
},
showfooter:{
值：false，
反映：正确
}
}
});
问题不在于
隐藏？
不工作。就是说，
$.header
总是解析为带有
id==“header”
的头（即
this.$.header
）。这意味着它将永远是真实的。解决此问题的最简单方法是在检查子项的
domReady
事件中设置属性

Polymer('example-card', {

    ... other element code ...

    domReady: function() {
        this.showheader = this.querySelector('.header');
        this.showfooter = this.querySelector('.footer');
    },
    publish: {
        showheader: {
            value: false,
            reflect: true
        },
        showfooter: {
            value: false,
            reflect: true
        }
    },

    ... other element code ...

});

为了使其正常工作，请按如下方式调整元件：

<div class="card card-header" hidden?="{{!showheader}}">
    <content id="header" select=".header"></content>
</div>
<div class="card card-footer" hidden?="{{!showfooter}}">
    <content id="footer" select=".footer"></content>
</div>



重要提示

上面的
domReady
代码只是一个示例，并不完整，将在树中从
内容开始找到
.header
。正确的方法是只检查
儿童
谢谢，这很有帮助。显然，“不工作”的意思是我的表达式无效，而不是
隐藏？
被破坏。我最终使用了一个只搜索孩子的
domReady
。
<polymer-element name="example-card" attributes="">
    <template>
        <paper-shadow z="1">
            <div vertical layout>
                <template if="{{showheader}}">
                    <div class="card card-header">
                        <content id="header" select=".header"></content>
                    </div>
                </template>
                <div class="card card-body">
                    <content select=":not(.footer)"></content>
                </div>
                <template if="{{showfooter}}">
                    <div class="card card-footer">
                        <content id="footer" select=".footer"></content>
                    </div>
                </template>
            </div>
        </paper-shadow>
    </template>
    <script>
    Polymer({

        domReady: function () {
            // Doesn't work in IE11...
            // this.showheader = this.querySelector(':scope > .header');
            // this.showfooter = this.querySelector(':scope > .footer');

            this.showheader = _.filter(this.children, function(e) { return e.className === "header"; }).length;
            this.showfooter = _.filter(this.children, function(e) { return e.className === "footer"; }).length;
        },
        publish: {
            showheader: {
                value: false,
                reflect: true
            },
            showfooter: {
                value: false,
                reflect: true
            }
        }

    });
    </script>
</polymer-element>

Polymer('example-card', {

    ... other element code ...

    domReady: function() {
        this.showheader = this.querySelector('.header');
        this.showfooter = this.querySelector('.footer');
    },
    publish: {
        showheader: {
            value: false,
            reflect: true
        },
        showfooter: {
            value: false,
            reflect: true
        }
    },

    ... other element code ...

});

<div class="card card-header" hidden?="{{!showheader}}">
    <content id="header" select=".header"></content>
</div>
<div class="card card-footer" hidden?="{{!showfooter}}">
    <content id="footer" select=".footer"></content>
</div>