<script>
            function menu(menu_, name, obj_) {
                this.menu = menu_;
                this.name = name;
                this.obj = obj_;
                this.init();
            }
            menu.prototype = {
                init: function () {
                    $('body').append('<div id="block_screen"></div>');
                    this.block_screen = $('#block_screen');
                    this.main_div = this.name + "_maindiv";
                    $(this.block_screen).css({
                        'width': '100%',
                        'height': '100%',
                        'position': 'absolute',
                        'top': 0,
                        'left': 0,
                        'z-index': 500
                    });
                    var root = block_screen.createShadowRoot();
                    root.appendChild(this.menu.content.cloneNode(true));
                    var main = root.getElementById('main');
                    var t = $(this.obj).offset().top;
                    var l = $(this.obj).offset().left;
                    $(main).css({
                        'top': (15 + t),
                        'left': (30 + l)
                    });
                    $(root.getElementById('title_img')).on('click', {xx: this}, function (ev) {
//                        con.send(ev.data.xx.callback + 'close|555');
                        ev.data.xx.close();
                    });
                },
                close: function (p) {
                    $('#block_screen').remove();
//                    $('#' + this.main_div).remove();
                }
            };




            var menus;
            $('.t1').each(function () {
                $(this)[0].oncontextmenu = function (event) {
                    menus = new menu(menu1, 'menus', this);
                    return false;
                };
            });
            
            
            $('.t2').each(function () {
                $(this)[0].oncontextmenu = function (event) {
                    menus = new menu(menu2, 'menus', this);
                    return false;
                };
            });
            
            
        </script>


        <template id="menu1">
            <style>
                #main{
                    position: relative;

                    background: #ccc;
                    height: 80px;
                    width: 80px;
                    z-index: 600;
                    border-style: groove;
                    box-shadow: 1px 1px 27px 5px rgba(41, 41, 41, 0.22);
                }
                #title{
                    height: 18px;
                    width: 100%;
                    background: #003eff;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: white;
                }
                #title img{
                    height: 12px;
                    width: 12px;
                    padding-right: 3px;
                }
                #title span{
                    margin-left: 5px;
                }
            </style>
            <div id="main">
                <div id="title"><span>Меню1</span>
                    <img id="title_img" src="pic/del_.png" alt=""/>
                </div>
            </div>
            <script>
                var x = document.getElementById('block_screen').shadowRoot;
                $(x.getElementById('main')).draggable();
                console.log($(x.getElementById('main')));
            </script>
        </template>


        <template id="menu2">
            <style>
                #main{
                    position: relative;
                    background: #ccc;
                    height: 70px;
                    width: 80px;
                    z-index: 600;
                    border-style: groove;
                    box-shadow: 1px 1px 27px 5px rgba(41, 41, 41, 0.22);
                }
                #title{
                    height: 18px;
                    width: 100%;
                    background: #003eff;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: white;
                }
                #title img{
                    height: 12px;
                    width: 12px;
                    padding-right: 3px;
                }
                #title span{
                    margin-left: 5px;
                }
            </style>
            <div id="main">
                <div id="title"><span>Меню2</span>
                    <img id="title_img" src="pic/del_.png" alt=""/>
                </div>
            </div>
            <script>
                var x = document.getElementById('block_screen').shadowRoot;
                $(x.getElementById('main')).draggable();
                console.log($(x.getElementById('main')));
            </script>
        </template>