Creating Custom Polymer Element using Polymer 3.0 not working?

22 views
Skip to first unread message

Joshua Root

unread,
May 11, 2018, 11:24:48 AM5/11/18
to Polymer
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?

Lorenzo Wagner

unread,
May 11, 2018, 7:34:58 PM5/11/18
to Polymer
The line of code is return html´´
not 
return 
html´´ 
not line break
Reply all
Reply to author
Forward
0 new messages