爲什麼聚合物中的數據綁定聚合填充不能在<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事件中將元素的內部運作暴露給最終用戶，從而破壞了自定義元素內封裝的目標。但是，在正常情況下，在支持的瀏覽器中，元素將按預期進行轉換，且封裝保持不變。