Question

我试图能够根据属性为元素着色。我知道，不支持内部绑定，所以我决定尝试

<core-style id="block-elem">
:host {
    background-color:  {{g.bgcolor}};}
</core-style>

当我尝试使用时：

<polymer-element name="block-elem" attributes="bgcolor" noscript>
...
<script>
  CoreStyle.g.bgcolor = 'red';
</script>

一切顺利。但我真正想做的是创建具有不同颜色的类似对象。所以我试过

<polymer-element name="block-elem" attributes="bgcolor">
<script>
 Polymer('block-elem', {
  bgcolor: "",
  }
 );CoreStyle.g.bgcolor = bgcolor;
</script>

我正在用

创建对象

<block-elem bgcolor="red">TEST</block-elem>

什么也没有。是否有可能实现这种功能？也许还有另一种选择，我甚至都没想到。

Answer 1

摘要

如果你想要的只是基于a来区分每个元素的样式（可能是数据绑定）属性。然后它更容易使用观察者设置元素样式元素而不是使用核心风格的元素。

observe: {
  bgcolor: function() {
    console.log("Setting color to " + this.bgcolor);
    this.style.backgroundColor = this.bgcolor; 
  }
}

但是如果你想用核心风格做一些更复杂的事情，比如根据一个属性设置一个元素的主题。然后使用css属性选择器在chrome和polyfill浏览器中都可以使用（使用firefox测试）。

以下示例显示了使用的区别：

global：一次更改页面上的所有元素。好的，如果你想要一个跨元素的一致主题
嵌套主题：我最喜欢但目前无法在polyfill浏览器中使用
css属性选择器：至少适用于linux上的chrome和firefox
元素样式：直接设置每个元素样式

部件

<link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
<link rel="import" href="../../webcomponents/bower_components/core-style/core-style.html">

<!-- Based on ideas from https://www.polymer-project.org/0.5/docs/elements/core-style.html -->

<!-- Using global sets all core-styles that use the global variable -->
<core-style id="demo-bindingcorestyle-style-global">
 :host {
   display:            block;
   background-color:   {{g.bgcolor}};
  }
</core-style>

<polymer-element name="demo-bindingcorestyle-global" attributes="bgcolor">
 <template>
  <core-style ref="demo-bindingcorestyle-style-global"></core-style>
    GLOBAL: This is a test trying to set the background to {{bgcolor}} but all elements share global and will be the last color
 </template>
  <script>
    Polymer({
      observe: {
        bgcolor: function() {
          console.log("Setting color to " + this.bgcolor);
          //  All elements get this global style
          CoreStyle.g.bgcolor = this.bgcolor;
        }
      }
    });
  </script>
</polymer-element>


<!-- To specify different colors use a Common base style and then themed styles that can be changed -->
<!-- NOTE: id cannot use "-" in name if it is going to be used with list. syntax because it is treated as subtractions -->
<core-style id="demobindingcorestylestylecommon">
  :host {
   display:            block;
  }
</core-style>

<core-style id="demo-bindingcorestyle-style-red">
 {{list.demobindingcorestylestylecommon.cssText}}
 :host {
   background-color:            red;
   color:                       yellow;
  }
</core-style>

<core-style id="demo-bindingcorestyle-style-blue">
 {{list.demobindingcorestylestylecommon.cssText}}
 :host {
   background-color:            blue;
   color:                       white;
  }
</core-style>

<core-style id="demo-bindingcorestyle-style-green">
 {{list.demobindingcorestylestylecommon.cssText}}
 :host {
   background-color:            green;
   color:                       black;
  }
</core-style>

<polymer-element name="demo-bindingcorestyle-substyles" attributes="theme">
 <template>
  <core-style ref={{themename}}></core-style>
    Themed: This is a test trying to specify the theme as {{theme}} works in latest chrome with shadowdom but fails in polyfill browsers.
 </template>
  <script>
    Polymer({
      theme: 'blue',
      computed: {
       themename: '"demo-bindingcorestyle-style-"+theme'
      },
      observe: {
        theme: function() {
          console.log("Setting theme to " + this.theme);
          //  All elements get this global style
          //this.$.mystyle.ref = "demo-bindingcorestyle-style-" + this.theme;
        }
      }
    });
  </script>
</polymer-element>


<!-- Using attribute selectors works both with shadowdom and polyfill -->

<core-style id="demo-bindingcorestyle-style-themeable">
 :host {
   display:            block;
  }
  :host([theme="red"]) {
    background-color:            red;
    <!-- Probably will want other themed color here -->
  }
  :host([theme="green"]) {
    background-color:            green; 
    <!-- Probably will want other themed color here -->
  }
  :host([theme="blue"]) {
    background-color:            blue;
    <!-- Probably will want other themed color here -->
  }
</core-style>

<polymer-element name="demo-bindingcorestyle-themeable" attributes="theme" noscript>
 <template>
  <core-style ref="demo-bindingcorestyle-style-themeable"></core-style>
    Themed: This is a test trying to specify the theme as {{theme}} it should actually work.
 </template>
</polymer-element>

<!-- Set background based on bgcolor attribute -->
<polymer-element name="demo-bindingcorestyle-justdoit" attributes="bgcolor">
 <template>
    Just set bgcolor: This is a test trying to set the background to {{bgcolor}} but all elements share global and will be the last color
 </template>
  <script>
    Polymer({
      observe: {
        bgcolor: function() {
          console.log("Setting color to " + this.bgcolor);
          this.style.backgroundColor = this.bgcolor; 
        }
      }
    });
  </script>
</polymer-element>

用法

<html lang="en">
 <head>
  <script src="../../webcomponents/bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link rel="import" href="../../webcomponents/bower_components/polymer/polymer.html">
  <link rel="import" href="demo-bindingCoreStyle.html">
  <title>demo-bindingCoreStyle test page</title>
 </head>
 <body>
  <h1>Demo</h1>
  <h2>Using Global</h2>
  <demo-bindingcorestyle-global bgcolor="red"></demo-bindingcorestyle-global>
  <hr>
  <demo-bindingcorestyle-global bgcolor="green"></demo-bindingcorestyle-global>
  <hr>
  <demo-bindingcorestyle-global bgcolor="blue"></demo-bindingcorestyle-global>
  <h2>Using substyles</h2>
  <demo-bindingcorestyle-substyles theme="blue"></demo-bindingcorestyle-substyles>
  <hr>
  <demo-bindingcorestyle-substyles theme="red"></demo-bindingcorestyle-substyles>
  <hr>
  <demo-bindingcorestyle-substyles theme="green"></demo-bindingcorestyle-substyles>
  <h2>Using theming with attribute css selector</h2>
  <demo-bindingcorestyle-themeable theme="blue"></demo-bindingcorestyle-themeable>
  <hr>
  <demo-bindingcorestyle-themeable theme="green"></demo-bindingcorestyle-themeable>
  <hr>
  <demo-bindingcorestyle-themeable theme="red"></demo-bindingcorestyle-themeable>
  <h2>Just set background</h2>
  <demo-bindingcorestyle-justdoit bgcolor="blue"></demo-bindingcorestyle-justdoit>
  <hr>
  <demo-bindingcorestyle-justdoit bgcolor="green"></demo-bindingcorestyle-justdoit>
  <hr>
  <demo-bindingcorestyle-justdoit bgcolor="red"></demo-bindingcorestyle-justdoit>
 </body>
</html>

聚合物 - 结合核心式

1 个答案:

摘要

部件

用法