Vaadin - print grid with CSS

Question

Inside vaadin-grid.css I managed to get the #table element which contains the grid's rows

and with for example

#table th {
  backround-color:green;
}

I can change its color.

Now I need to do that only when the page is printed.I tried adding inside vaadin-grid.css

@media print {
 #table th {
   backround-color:green;
  }
}

but that has no effect.Note that I print the page using javascript print(). I added an id="viewfgrid" (as seen in the screenshot) to the enclosing grid and with that now when I add inside shared-style.css

@media print {
     #viewfgrid {
       outline:green;
      }
    }

I can access and change the grid when printing.

However I can't access the inside table with the rows.I tried various variations like

 @media print {
     #viewfgrid #table {
       background-color:green;
     }
}


 @media print {
 #viewfgrid :host > table {
       background-color:green;
    }  
 }

but no effect.

How can I access that table ?

Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect

thanks

Answer 1

I'm not sure why @media print would not work from within the Grid's shadow DOM styles. Did you try in different browsers? I wonder if there's some browser bug/limitation here, similar to the fact that you can't define a @font-face inside shadow DOM.

Also as a secondary question why can I access #table from within vaadin-grid.css without prepending :host ? when I do that , it has no effect

The host selector targets the same element as the #viewfgrid ID. To select a host element with a specific ID, you can use :host(#viewfgrid) inside the shadow DOM styles.

Notice, that you should not rely on any ID, class name, or raw tag name selectors when styling Vaadin components (for example #table or th . Those are considered internal implementation details / private API, and can change in any release. You should only rely on the :host(...) and [part~="..."] selectors and state attribute selectors (for example, [focused] ).

If there really is a limitation in using @media print inside shadow DOM styles, I think your best option is to use the ::part() selector , which allow you to style named parts inside the shadow DOM from the outside/light DOM styles. That is actually a more robust method than relying on injecting styles into the shadow DOM (via the frontend/mytheme/components/vaadin-grid.css file).

styles.css :

@media print {
  #viewfgrid::part(cell) {
    background-color: green;
  }
}

The API docs show all available parts of the Grid (look for the "Styling" section): https://cdn.vaadin.com/vaadin-web-components/23.2.0-alpha3/#/elements/vaadin-grid

Answer 2

Grid is by design not very printing friendly as it has been designed for "infinite vertical scrolling". You wont for example have headers and footers per page. If you want to include "report" functionality to your application, it is better approach to create separate report view that is designed printing friendly instead of screen use. This will allow you to use different layouting and components in it. You can for example generate multiple Grid's for each page. Or use BeanTable component from Directory, which generaters HTML Table without shadow DOM.

Answer 3

Because apparently you can't access the shadow dom from CSS when there's no 'part' tag on the element,as is the case with this table ,I got it by using Javascript as in :

UI.getCurrent().getPage().executeJs("const tabledom = document.querySelector(\"#viewfgrid\").shadowRoot.querySelector(\"#table\");
             tabledom.style.cssText+='.....' "

So now this snippet is called when the user clicks on a Print button and you can do whatever with the element's style.In my case I flatten the table so that it can be printed without the scrollbar intervening.