Hi, I'm trying to create a custom checkbox, but my JavaScript code isn't
working right. I keep getting a
Uncaught SyntaxError: Unexpected token {
on line 1 of the code. This is my code:
import { PolymerElement, html } from '@polymer/poymer/polymer-element.js';
class JTGCheckbox extends PolymerElement {
constructor() {
super();
}
static get template() {
return
html`
<style>
:host {
display: inline-block;
font-family: 'Roboto';
}
#checkbox-container {
border: 2px solid black;
width: 20px;
height: 20px;
margin-right: 8px;
border-radius: 5px;
background-color:
var(--jtg-checkbox-unchecked-and-background-color, white);
}
#inner-container {
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
margin: 2px;
border-radius: 3px;
background-color:
var(--jtg-checkbox-unchecked-and-background-color, white);
}
:host([aria-checked="true"]) #inner-container {
animation-name: checkedAnimation;
animation-duration: 0.5s;
background-color: var(--jtg-checkbox-checked-color,
green);
}
#checkbox-label {
font-size: var(--jtg-checkbox-font-size, 20px);
overflow-wrap: break-word;
}
#checkbox-label, #checkbox-container {
display: inline-block;
vertical-align: middle;
}
@keyframes checkedAnimation {
from {
background-color:
var(--jtg-checkbox-unchecked-and-background-color, white);
}
to {
background-color: var(--jtg-checkbox-checked-color,
green);
}
}
</style>
<div id="checkbox-container">
<div id="inner-container"></div>
</div>
<div id="checkbox-label"><slot></slot></div>
`;
}
}
window.customElements.define('jtg-checkbox', JTGCheckbox);
How would I fix this issue?
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/20540743-c7b7-4736-94ad-55ce206d2dc8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
