Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

初探 Polymer 1.0 之 custom-style

  Polymer 在我看来就是现代浏览器特性的代名词(虽然也有黑魔法可以兼容实现),不仅仅是 Shadow DOM,就连高大上的 CSS Variable 也被用上了。其中有一个 custom-style 的实现,甚至可以把变量绑定到 CSS 中使用,我该说这是极好的还是该说它丧心病狂呢?
  在 style 元素上添加 is="custom-style" 即可使用 custom-style 的特性(虽然是一坨内魔法的实现),里面实现了一些原生的兼容这我就不介绍了。最让我印象深刻的是把 JavaScript 变量赋值给 CSS 变量。下面代码就做了这件事 <script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
  <style is="custom-style">
    h1 { color: var(--color); }
  </style>
  <template>
    <h1><content></content></h1>
  </template>
  <script>
    Polymer({
      is: 'demo-test',
      ready: function() {
        var that = this;
        var i = 0;
        void function callee() {
          that.customStyle['--color'] = 'hsl(' + i++ + ',50%,30%)';
          that.updateStyles();
          requestAnimationFrame(callee);
        }();
      }
    });
  </script>
</dom-module>

<demo-test>次碳酸钴</demo-test>
  在 customStyle 上可以设置 CSS 属性的值,然后调用 updateStyles 即可更新到 DOM 上。不过 Polymer 感觉还是比较保守,至少要手动调用 updateStyles 才能更新。如果此处直接使用数据绑定甚至直接绑定到 VM 上可能会更丧心病狂(然而我就喜欢这么丧心病狂的!)。
网名:
3.80.55.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^