CSS变量槽Polymer（动态加载）元素

时间：2016-06-29 13:40:24

标签： html css polymer polymer-1.0

我的项目中有多个自定义元素，我遇到了css变量的问题。在我的父元素中，我有多个带有状态类的item元素。我想使用该状态类操纵背景和边框颜色，但我想在我的父元素中定义值，但不知何故它不想工作。

这是我的父元素： 

<link rel="import" href="app-task.html" />
<dom-module id="app-task-grid">
<template>
    <style>
        :host {
            display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
            overflow:hidden; background: #eee;

            --column-1-width: 80px;
            --column-3-width: 120px;
            --column-4-width: 180px;
            --column-5-width: 220px;
            --column-6-width: 100px;

            --task-background-color: #eee;
            --task-border-color: #ccc;
        }

        :host table.header {
            position: absolute; top: 0; left: 0; width: 100%; height: 40px; background: #DDD;
        }

        :host table.header th {
            letter-spacing: 2px; font-weight: normal; text-transform: uppercase;
            font-size: 80%; border-left: 1px solid #aaa;

            margin: 0; padding: 0 10px;
        }

        :host th.column1 {
            width: var(--column-1-width);
        }

        :host th.column2 {
            text-align: left;
        }

        :host th.column3 {
            width: var(--column-3-width);
        }

        :host th.column4 {
            width: var(--column-4-width);
        }

        :host th.column5 {
            width: var(--column-5-width);
        }

        :host th.column6 {
            width: var(--column-6-width);
            text-align: left;
        }

        :host th.hide, :host td.hide {
            display: none;
        }

        :host th.show, :host td.show {
            display: table-cell;
        }

        :host table.header .scrollbar {
            width: 20px; border-left: none;
            padding: 0;
        }

        :host .items {

            position: absolute; left: 0; top: 40px; right: 0; bottom: 0;
            overflow:hidden; overflow-y: scroll;

            margin: 0; padding: 0;
        }

        :host .items::-webkit-scrollbar {
            width:22px; border-left: 6px solid #ddd;
            background-color:#ddd;
        } 

        :host .items::-webkit-scrollbar-thumb {
            background-color:#aaa;
            border-left: 6px solid #ddd;
            min-height: 80px;
        }

        .waiting {
            --task-background-color: #e9d32c;
            --task-border-color: #b0a030;
        }

        .assigned {
            --task-background-color: #1b7eee;
            --task-border-color: #1357a4;
        }

        .started {
            --task-background-color: #EF6207;
            --task-border-color: #c05d1d;
        }

        .working {
            --task-background-color: #e99c2c;
            --task-border-color: #c48222;
        }

        .aborted {
            --task-background-color: #E34126;
            --task-border-color: #b72d15;
        }
    </style>

    <table class="header">
        <tr>
            <th class="column1"></th>
            <th class="column2">Column#2</th>
            <th class="column3">Column#3</th>
            <th class="column4">Column#4</th>
            <th class="column5">Column#5</th>
            <th class="column6">Column#6</th>
            <th class="scrollbar"></th>
        </tr>
    </table>

    <div class="items">
        <app-task id="task0" class="waiting"></app-task>
    </div>

</template>
<script>
    Polymer({
        is:"app-task-grid",
        loadItems: function()
        {
            let statuses = ['waiting','assigned','started','working','aborted'];
            for(var i = 1; i<=30; i++)
            {
                let itemStatus = statuses[Math.floor(Math.random()*statuses.length)];

                let itemElement = document.createElement('APP-TASK');
                        itemElement.id = 'task'+i;
                        itemElement.classList.add(itemStatus);

                console.debug( itemElement );

                this.querySelector('.items').appendChild( itemElement );
            }
        }
    });
</script>
</dom-module>

我的孩子元素： 

<dom-module id="app-task">
<template>
    <style>
        :host {
            display: block; margin: 8px 0; padding: 0;
        }

        :host table {
            width: 100%; height: 80px;

            background-color: var(--task-background-color, #fff);

            border-bottom: 5px solid var(--task-background-color, #fff);
            border-top: 5px solid var(--task-background-color, #fff);

            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07),
                        0 1px 5px 0 rgba(0, 0, 0, 0.06),
                        0 3px 1px -2px rgba(0, 0, 0, 0.1);
        }

        :host table td {
            border-left: 1px solid var(--task-border-color, #ccc);
            margin: 0; padding: 0 10px;
        }

        :host td.column1 {
            width: var(--column-1-width);
        }

        :host td.column2 {

        }

        :host td.column3 {
            width: var(--column-3-width);
        }

        :host td.column4 {
            width: var(--column-4-width);
        }

        :host td.column5 {
            width: var(--column-5-width);
        }

        :host td.column6 {
            width: var(--column-6-width);
        }
    </style>

    <table>
        <tr>
            <td class="column1">C#1</td>
            <td class="column2">C#2</td>
            <td class="column3">C#3</td>
            <td class="column4">C#4</td>
            <td class="column5">C#5</td>
            <td class="column6">C#6</td>
        </tr>
    </table>

</template>
<script>
    Polymer({
        is:"app-task"
    });
</script>
</dom-module>

我已尝试过：

        
  • ：host .waiting {...}
    •     
  • ：host app-task.waiting {...}
    •     
  • app-task.waiting {...}
    •     
  • ：root .waiting {...}
    •     
  • ：root app-task.waiting {...}
    •     
  • ：root {.waiting {...}}
    •     
  • ：root {app-task.waiting {...}}
    •     
  • 类的app-task的父元素
    •     
  • style = app-grid模板中的“custom-style”
    •     
  • style =模板外的“自定义样式”，但在app-grid元素html文件中

但他们似乎都没有工作。

如果我在：host中定义css变量然后它正在工作，只是不以某种方式使用类。错在哪里？

更新＃1：

如果我将“样式范围app-task-grid”添加到任务的父元素中，那么使用样式范围会有些奇怪：

<div class="items">
    <div class="style-scope app-task-grid waiting">
        <app-task id="task1"></app-task>
    </div>
</div>

然后如果我添加一个普通的css规则，就像它在app-task中应用的颜色，但css变量不是。

更新＃2：

正如有人提到这个模板正在运行，我测试了它，它是，但是id没有提到这些项目是在运行中创建并附加到项目上的。我在Plunker的代码中添加了几乎所有内容：http://plnkr.co/edit/b5XW1w3sEOy4UHc0rdWH?p=preview

很抱歉我的误导，我不知道问题来源是动态负载。

注意：我用更多示例更新了问题。

更新＃3：

感谢@ a1626s和@GünterZöchbauer，我们找到了答案：

我的初始代码很好并且从一开始就工作，我严重地定义了问题，因为我没有看到问题是什么。因此，如果有人在元素内动态加载元素，则必须使用Polymer.dom api。

Polymer.dom(this.querySelector('.items')).appendCild(itemElement);

2 个答案:

答案 0 :(得分：2)

我的初始代码中没有任何问题。我复制了您的代码并将其粘贴到plunker

中 
javascript

它似乎对我很好。

至于您的新问题，请使用此方法替换{ let statuses = ['waiting','assigned','started','working','aborted']; for(var i = 1; i<=30; i++) { let itemStatus = statuses[Math.floor(Math.random()*statuses.length)]; let itemElement = document.createElement('APP-TASK'); itemElement.id = 'task'+i; itemElement.classList.add(itemStatus); console.debug( itemElement ); Polymer.dom(this.$.items).appendChild(itemElement); } Polymer.dom.flush(); } 方法，它应该可以正常工作。

app-task-grid

此外，这是我在<div class="items" id="items"> //added id attribute to the div tag 元素

中所做的更改 
dom tree

问题在于您添加子元素的方式，它们未正确插入元素的interface A { fun calculate(n: Int): Int } 。 Polymer提供了有关如何使用其元素树的文档。您可以阅读更多相关信息here

答案 1 :(得分：0)

请记住，设置CSS变量的<style>标签中必须有is="custom-style"。

我把一个非常粗略的片段扔在一起展示它。

＆＃13;
＆＃13; 
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="app-task">
  <template>
    <style>
      :host {
        display: block;
        height: 80px;
        margin: 5px;
        background-color: var(--task-background-color, #fff);
        border: 1px solid var(--task-border-color, #ccc);
      }
    </style>
    <div>some stuff...</div>
  </template>
  <script>
    Polymer({
      is: 'app-task'
    });
  </script>
</dom-module>

<!-- Beginning of the 'parent element' -->

<style is="custom-style">
  .waiting {
    --task-background-color: #e9d32c;
    --task-border-color: #b0a030;
  }
  .assigned {
    --task-background-color: #1b7eee;
    --task-border-color: #1357a4;
  }
  .started {
    --task-background-color: #EF6207;
    --task-border-color: #c05d1d;
  }
  .working {
    --task-background-color: #e99c2c;
    --task-border-color: #c48222;
  }
  .aborted {
    --task-background-color: #E34126;
    --task-border-color: #b72d15;
  }
</style>
<div class="items">
  <app-task id="task1" class="waiting"></app-task>
  <app-task id="task2" class="waiting"></app-task>
  <app-task id="task3" class="working"></app-task>
  <app-task id="task4" class="working"></app-task>
  <app-task id="task5" class="assigned"></app-task>
  <app-task id="task6" class="aborted"></app-task>
</div>
＆＃13;
＆＃13;
＆＃13;

另一个运行多个元素的例子

＆＃13;
＆＃13; 
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<dom-module id="app-task">
  <template>
    <style>
      :host {
        display: block;
        height: 80px;
        margin: 5px;
        background-color: var(--task-background-color, #fff);
        border: 1px solid var(--task-border-color, #ccc);
      }
    </style>
    <div>some stuff...</div>
  </template>
  <script>
    Polymer({
      is: 'app-task'
    });
  </script>
</dom-module>

<!-- Beginning of the 'parent element' -->

<dom-module id="app-task-grid">
  <template>
    <!-- normal styles -->
    <style>
      app-task {
        width: 50%;
        margin: 10px auto;
      }
    </style>
    <!-- custom styles -->
    <style is="custom-style">
      .waiting {
        --task-background-color: #e9d32c;
        --task-border-color: #b0a030;
      }
      .assigned {
        --task-background-color: #1b7eee;
        --task-border-color: #1357a4;
      }
      .started {
        --task-background-color: #EF6207;
        --task-border-color: #c05d1d;
      }
      .working {
        --task-background-color: #e99c2c;
        --task-border-color: #c48222;
      }
      .aborted {
        --task-background-color: #E34126;
        --task-border-color: #b72d15;
      }
    </style>
    <div class="items">
      <app-task id="task1" class="waiting"></app-task>
      <app-task id="task2" class="waiting"></app-task>
      <app-task id="task3" class="working"></app-task>
      <app-task id="task4" class="working"></app-task>
      <app-task id="task5" class="assigned"></app-task>
      <app-task id="task6" class="aborted"></app-task>
    </div>
  </template>
  <script>
    Polymer({
      is: 'app-task-grid'
    });
  </script>
</dom-module>

<!-- And now pushing it to the screen -->

<app-task-grid></app-task-grid>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题