为什么聚合物中的数据绑定聚合填充不能在<style>标签中工作？

Question

我一直在使用聚合物构建幻灯片自定义元素，并且已经使用Animate.css库进行幻灯片切换。当Canary启用“实验性网络平台”功能时，标签会按预期工作，但在关闭实验功能的常规铬版中，平台填充不允许我在样式标签中进行数据绑定。举个例子：

<polymer-element name="impress-slide" constructor="ImpressSlide" attributes="exit entrance"> 
    <template> 
     <link rel="stylesheet" type="text/css" href="basic-animations.css"> 
     <style type="text/css"> 
      :host{ 
       position: relative; 
       top: 0; 
       left: 0; 
       overflow: hidden; 
       display: none; 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       -webkit-box-sizing: border-box; 
       -moz-box-sizing: border-box; 
       box-sizing: border-box; 

       /* Animate.css */ 
       -webkit-animation: 1s both; 
       animation: 1s both; 
       -webkit-animation-name: {{ animation }} !important; 
       animation-name: {{ animation }} !important; 

      } 

      @-webkit-keyframes fadeOutRightBig { 
       0% { 
       opacity: 1; 
       -webkit-transform: translateX(0); 
       transform: translateX(0); 
       } 

       100% { 
       opacity: 0; 
       -webkit-transform: translateX(2000px); 
       transform: translateX(2000px); 
       } 
      } 

      @keyframes fadeOutRightBig { 
       0% { 
       opacity: 1; 
       -webkit-transform: translateX(0); 
       -ms-transform: translateX(0); 
       transform: translateX(0); 
       } 

       100% { 
       opacity: 0; 
       -webkit-transform: translateX(2000px); 
       -ms-transform: translateX(2000px); 
       transform: translateX(2000px); 
       } 
      } 

      @keyframes bounceIn { 
       0% { 
       opacity: 0; 
       -webkit-transform: scale(.3); 
       -ms-transform: scale(.3); 
       transform: scale(.3); 
       } 

       50% { 
       opacity: 1; 
       -webkit-transform: scale(1.05); 
       -ms-transform: scale(1.05); 
       transform: scale(1.05); 
       } 

       70% { 
       -webkit-transform: scale(.9); 
       -ms-transform: scale(.9); 
       transform: scale(.9); 
       } 

       100% { 
       -webkit-transform: scale(1); 
       -ms-transform: scale(1); 
       transform: scale(1); 
       } 
      } 

      :host(.past:host) { 
       /*opacity: 0;*/ 
      } 

      :host(.current:host) { 
       display: block; 
      } 

      :host(.next:host) { 
       pointer-events: none; 
      } 
     </style> 
     <content></content> 
    </template> 
    <script type="text/javascript"> 
     (function() { 
      Polymer('impress-slide', { 
       entrance: 'bounceIn', 
       exit: 'fadeOutRightBig', 
       animation: "", 

       animateIn: function() { 
        // this.opacity = 1; 
        this.animation = this.entrance; 
       }, 

       animateOut: function() { 
        // this.opacity = 0; 
        this.animation = this.exit; 
       }, 

       ready: function() { 

       } 
      }) 
     })(); 
    </script> 
</polymer-element> 

的animation-name: {{ animation }} !important;将在填充工具的版本仍然未渲染，简单地计算到animation: 1s both;。我想知道是否有人对此有何洞见，以及我可以做什么作为解决方法？

Answer 1

因此，经过一些挖掘，我发现聚合物github页上的问题的讨论：https://github.com/Polymer/polymer/issues/270。

基本上，这是ShadowDOMPolyfill暂时不受支持的功能，作者不确定他们是否会出于性能原因实现此功能。分配给该问题的程序员提出以下解决方法：

<style> 
     div { 
     border: 1px solid black; 
     width: {{width}}px; 
     } 
     /* polyfill specific rule */ 
     /* @polyfill-rule 
     @host[id={{id}}] div { 
      border: 1px solid black; 
      width: {{width}}px; 
     } 
     */ 
</style> 

... 

<script type="text/javascript"> 
Polymer('x-foo', { 

     ... 

     registerCallback: function(declaration) { 
      // add shimmedStyles to this instance 
      if (window.ShadowDOMPolyfill) { 
      var content = declaration.templateContent(); 
      content.insertBefore(content.shimmedStyle, content.firstChild); 
      } 
     } 
     }); 
</script> 

无论出于何种原因，我自己的实现此方法的失败。代替这一点，我写了一个解决办法，虽然是一个小丑陋，做工相当不错的浏览器不受支持：

<script type="text/javascript"> 
    (function() { 
     Polymer('impress-slide', { 
      entrance: 'bounceIn', 
      exit: 'fadeOutRightBig', 
      animation: "", 

      animateIn: function() { 
       this.animation = this.entrance; 
       // Fallback for polyfill 
       if (window.ShadowDOMPolyfill && 
        ((this.style.animationName != this.entrance) || 
        (this.style.webkitAnimationName != this.entrance))) { 
         this.style.webkitAnimation = 
         this.style.animation = this.entrance + " 1s both"; 
       }      
      }, 
      animateOut: function() { 
       this.animation = this.entrance; 
       // Fallback for polyfill 
       if (window.ShadowDOMPolyfill && 
        ((this.style.animationName != this.exit) || 
        (this.style.webkitAnimationName != this.exit))) { 
         this.style.webkitAnimation = 
         this.style.animation = this.exit; 
       }      
      }, 

      ready: function() { 

      } 
     }) 
    })(); 
</script> 

从本质上讲，这些修改测试浏览器的填充工具的存在和不正确的分配动画样式属性。如果找到这些内容，该功能将手动将它们应用于幻灯片（使用内联插入）（例如this.style.animation = this.entrance + " 1s both";）。

这种方法的缺点是，它会在polyfill事件中将元素的内部运作暴露给最终用户，从而破坏了自定义元素内封装的目标。但是，在正常情况下，在支持的浏览器中，元素将按预期进行转换，且封装保持不变。