1_my-element.tsx

///<reference path="../../../bower_components/polymer/custom_typings/dom.d.ts"/>
///<reference path="../../../bower_components/polymer/src/typescript/polymer.d.ts"/>


namespace JSX {
    export function createElement(element: string, attributes: any, ...children: string[]): string {
        let attrs = "";
        for (const attr in attributes) {
            attrs += ` ${attr}="${attributes[attr]}"`;
        }
        return `<${element} ${attrs}>
            ${children.join("\n")}
        </${element}>`;
    }

    export interface IntrinsicElements {
        div: { class?: string },
        template: { is?: string, items?: string },
        style: {},
        "my-element": { name: string }
    }
}

class MyElement extends Polymer.Element {

    static get is() { return "my-element" };

    static get config() { return {
        properties: {
            name: {
                type: String,
                value: "World"
            }
        }
    }; }

    static get template() {
        const t = document.createElement("template");
        t.innerHTML =
            <div>
                <style>
                {`
                    div { color: blue; }
                `}
                </style>

                <div>Hello {"{{"} name {"}}"}</div>

            </div>;

        return t;
    }

}

// Register custom element definition using standard platform API
window.customElements.define(MyElement.is, MyElement);

2_build.sh

tsc --lib dom,es2017 --target es2015 --jsx react --reactNamespace JSX my-element.tsx

3_my-element.js

///<reference path="../../../bower_components/polymer/custom_typings/dom.d.ts"/>
///<reference path="../../../bower_components/polymer/src/typescript/polymer.d.ts"/>
var JSX;
(function (JSX) {
    function createElement(element, attributes, ...children) {
        let attrs = "";
        for (const attr in attributes) {
            attrs += ` ${attr}="${attributes[attr]}"`;
        }
        return `<${element} ${attrs}>
            ${children.join("\n")}
        </${element}>`;
    }
    JSX.createElement = createElement;
})(JSX || (JSX = {}));
class MyElement extends Polymer.Element {
    static get is() { return "my-element"; }
    ;
    static get config() {
        return {
            properties: {
                name: {
                    type: String,
                    value: "World"
                }
            }
        };
    }
    static get template() {
        const t = document.createElement("template");
        t.innerHTML =
            JSX.createElement("div", null,
                JSX.createElement("style", null, `
                    div { color: blue; }
                `),
                JSX.createElement("div", null,
                    "Hello ",
                    "{{",
                    " name ",
                    "}}"));
        return t;
    }
}
// Register custom element definition using standard platform API
window.customElements.define(MyElement.is, MyElement);