I'm new to working with Polymer.js and CSS. My goal is to have text in todo.item display normally when todo.done is false, and with a line-through style when todo.done is true.
I'm considering using CSS for this task, but I'm unsure how to implement an if/else logic in CSS. The current code applies the line-through style to all items. Is CSS the best approach for this situation, or should I consider another method?
<ol>
<template is="dom-repeat" items="{{ticket.todos}}" as="todo">
<style>
.todo-item{
text-decoration: line-through;
}
</style>
<li><span class="todo-item" done="{{todo.done}}"> {{todo.item}}</span></li>
</template>
</ol>