为什么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的情况下，它将元素的内部工作暴露给最终用户，从而破坏了在自定义元素中封装的目标。 但是，在正常情况下，在受支持的浏览器中，该元素将按预期转换，并且封装保持不变。