為什么Polymer中的數據綁定Polyfill無法在<style> tags?

Question

我一直在使用聚合物構建幻燈片自定義元素，並一直在使用Animate.css庫進行幻燈片過渡。 當Canary與“ Experimental Web Platform”功能一起使用時，該標簽可以按預期工作，但是在關閉了實驗功能的chrome常規版本中，該平台的polyfill不允許我在樣式標簽中進行數據綁定。 舉個例子：

<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; 將在polyfill版本中保持未渲染狀態，僅對animation: 1s both;評估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>

本質上，這些修改會測試瀏覽器是否存在polyfill和動畫樣式屬性的不正確分配。 如果找到了這些，該函數將使用嵌入式插入將它們手動應用於幻燈片（例如this.style.animation = this.entrance + " 1s both"; ）。

這種方法的缺點是，在發生polyfill的情況下，它將元素的內部工作暴露給最終用戶，從而破壞了在自定義元素中封裝的目標。 但是，在正常情況下，在受支持的瀏覽器中，該元素將按預期轉換，並且封裝保持不變。