css - 在 polymer 元素中有条件地加载 css 文件

Question

我有一堆包含不同动画的 css 文件，我想根据动画属性在 polymer 元素中动态加载 css 文件:

是否可以像这样绑定(bind) {{animation}} 值:

<polymer-element name="yo-dialog" attributes="animation">
    <template>
        <link rel="stylesheet" href="yo-dialog.css">
        <link rel="stylesheet" href="dialog.css">
        <link rel="stylesheet" href="dialog-{{animation}}.css">

        <div id="somedialog" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content">            
                <content> </content>
                <div>
                    <button class="action" data-dialog-close>{{animation}}</button>
                </div>
            </div>
        </div>
    </template>

元素用法:

<yo-dialog id="the_dialog" animation="ken">
    <h1>hello world</h1>
</yo-dialog>

Answer 1

当我遇到同样的问题时，我发现最快的解决方法是在我知道属性已设置时以编程方式添加链接元素，即在 domReady 事件上:

在您的代码中，我将使用 Polymer 声明而不是链接标记:

<polymer-element name="yo-dialog" attributes="animation">
    <template>
        <link rel="stylesheet" href="yo-dialog.css">
        <link rel="stylesheet" href="dialog.css">

        <div id="somedialog" class="dialog">
            <div class="dialog__overlay"></div>
            <div class="dialog__content">            
                <content> </content>
                <div>
                    <button class="action" data-dialog-close>{{animation}}</button>
                </div>
            </div>
        </div>
    </template>
    <script>
      Polymer("yo-dialog", {
        domReady: function() {
          var fileref=document.createElement("link")
          fileref.setAttribute("rel", "stylesheet")
          fileref.setAttribute("type", "text/css")
          fileref.setAttribute("href", "dialog-"+this.animation+".css")
          console.log(fileref)
          this.appendChild(fileref)
          console.log("domReady!")

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

我在 Plunker 中放入了一个工作示例:http://plnkr.co/edit/IrN2FpDDN4PX1MVQqC1C?p=preview