Custom Grid Element with ShadowDom

To inspect dart object, open console, select cj-grid, we can find dart object is export to javascript and inspectable in javascript console 

var grid= document.querySelector('cj-grid').grid; //this is SlickGrid object
var column = grid.columns.$index(0,0);  // this is dart Column Object
column.toString$0()  // call toString function in dart object that produce json string...
//"{name: input, resizable: false, sortable: false, minWidth: 30, rere....}"

To use custom JGrid, must specify height of element

Panel 1, right click to copy,download
Panel 2

Copy/Download/Style

1. include clipboard script
          
              <script src="../packages/slickdart/plugin/copy/Clipboard.min.js"></script>
          
2. include 'cj-grid' tag with inner style
          
            <cj-grid style='width:200px; height:400px;' class='first'>
                    <style>
                        .slick-header-column {
                            border-style: solid solid solid solid;
                            border-width: 1px 1px 0 0px;
                        }
                    </style>
                </cj-grid>
        
3. include 'download' attribute to 'cj-grid' to turn on context menu