聚合物 - 结合芯型

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

总结

如果您只想根据 （可能是数据绑定）属性。然后使用起来更简单 一个观察者来设置元素样式元素而不是使用 核心风格元素。

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

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

下面的例子展示了使用的区别：

• 全局：一次更改页面上的所有元素。很好，如果你想要一个 跨元素的一致主题
• 嵌套主题：我的最爱，但目前在 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>