I'm building a component in Polymer 3.0 for the first time, and I was wondering how to dynamically assign styles to a DOM element. I am building a horizontal timeline of events, and I would like to place vertical markers at every year in set range. In Vue.js, I would do something like this:
<year-marker v-for="(year, index) in years" :style="getPercentFromLeft(year)" :key="index"></year-marker>
In this setup, I would have a data structure with all the years that I want to display, and the v-for would loop through that data structure and render a markers for every year.
The getPercentFromLeft function would calculate the percent from the left side of the screen that the marker should be positioned. The return value is in the format of {left: 10%}. The year-marker has additional styles, but they are specified in the style section.
What is the equivalent way to do this in Polymer 3.0? If there isn't one, what is a better way to do this?
In polymer3 you can achieve that using the below code. Iterating over your data structure and calculating the styles for each item.
<dom-repeat items="{{years}}">
<template>
<paper-item class$={{getPercentFromLeft(year)}}>{{item}}</paper-item>
</template>
</dom-repeat>
getPercentFromLeft will be called for each item(year) and you can return the required class.