Custom Overlay Theme / Polymer 3

Flow
1

I’m trying to create a theme, I took the example of the site, but it does not work. What’s wrong?


import { PolymerElement, html } from '@polymer/polymer';

import '@vaadin/vaadin-text-field/vaadin-text-field.js';
import '@vaadin/vaadin-button/vaadin-button.js';

import '@vaadin/vaadin-dialog/vaadin-dialog.js';


class SlideshowDialog extends PolymerElement
 {

    static get properties() {
        return {
            image:String
        }
    } 

    protected _getDialogChild(selector:any) {
        return this.$.showDialog.$.overlay.content &&
            this.$.showDialog.$.overlay.content.querySelector(selector);
    }

    onOk(_evt:any) { 
        this.$.showDialog.opened = false;
    }

    show(showDialog:boolean, image:string = "dfe_img1") {
        this.image = image;
        this.$.showDialog.opened = showDialog;
    }

    // protected render () 
    static get template() {
        return html `

        <style>
        
            img {
                width: auto;
                height: auto;
                max-width: 90%;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }

        </style>

        <dom-module id="error-dialog-overlay-styles" theme-for="vaadin-dialog-overlay">
        <template>
            <style>
            :host([theme~="error"]
) [part="overlay"]
 {
                background-color: hsl(3, 100%, 61%);
                color: #fff;
            }
            </style>
        </template>
        </dom-module>

        <vaadin-dialog id="showDialog" theme="error">

            <template>
                <div style="width:100%; text-align:center;">
                    <img src="images/[[image]
].png" on-click="onOk">
                </div>
            </template>

        </vaadin-dialog>

        `;
    }

}

window.customElements.define('slideshow-dialog', SlideshowDialog);