I have numerous CSS files with various animations, and I am interested in dynamically loading a CSS file in a Polymer element based on the animation attribute:
Is it feasible to bind the {{animation}} value like this:
<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>
Sample of how to use the element:
<yo-dialog id="the_dialog" animation="ken">
<h1>hello world</h1>
</yo-dialog>