以编程方式调整Polymer Web Component的宽度

Question

目标

我有两个应该嵌套的Web组件：<cpanel-tabs>和<cpanel-tab>。 <cpanel-tabs>的容器宽度为100%，<cpanel-tab>个孩子必须以宽度填充它，例如：

• <cpanel-tabs>有width: 1500px
• 假设有三个<cpanel-tab>个孩子;每个孩子都有width: 500px

部分解决方案

我设法使用JavaScript获取此行为（以隐藏用户），如下所示：

<polymer-element name="cpanel-tabs">
    <!-- <template> and code for my component -->
    <script>
        Polymer({
            ready: function() {
                var items = this.children;

                var count = items.length;
                var width = Math.floor(this.offsetWidth / count);

                for(var i = 0; i < count; i++) {
                    items[i].setw(width);
                }
            }
        });
    </script>
</polymer-element>

和<cpanel-tab>组件：

<polymer-element name="button-tab" attributes="icon active">
    <!-- <template> and code for my component -->
    <script>
        Polymer({
            ready: function() {
                if(this.active != undefined) {
                    this.shadowRoot.querySelector("#contentWrapper").classList.add("active");
                }
            },
            // ....
            setw: function(w) {
                this.shadowRoot.querySelector("#contentWrapper").style["width"] = w + "px";
            }
        });
    </script>
</polymer-element>

问题

它在谷歌浏览器中完美运行，但当我转到Firefox或Internet Explorer时，console显示此错误：

TypeError: items[i].setw is not a function

首先，为什么在Chrome以外的其他浏览器中不起作用，其次，如何使用JavaScript 使其工作？

成功尝试，但其他观点

我尝试对horizontal layout使用<cpanel-tabs>，为每个flex使用<cpanel-tab>。令人惊讶的是，它在每个浏览器中都能很好地工作，但是我想使用一种方法，每个标签不会花费开发人员一个字（我的意思是flex）。

<cpanel-tabs horizontal layout>
    <cpanel-tab icon="folder" flex active>Browse</cpanel-tab>
    <cpanel-tab icon="mail" flex>Write a mail</cpanel-tab>
    <cpanel-tab icon="create" flex>Write an article</cpanel-tab>
</cpanel-tabs>

但是，我不想要这种方法，因为它更难使用。