Vaadin打印Grid时无法通过CSS选中内部table元素设置打印样式

首先明确两个底层逻辑，所有异常表现本质都是这两点导致的：

• Vaadin Grid 是基于 Web Components 实现的，内部DOM被包裹在Shadow DOM中，存在严格的样式隔离：全局样式默认无法穿透Shadow DOM边界，选中组件内部的元素；组件内部的样式也有自己独立的作用域，和全局样式不互通。
• 原有样式代码存在拼写错误：backround-color少写了一个字母g，正确属性名是background-color，这是最早写的打印样式不生效的诱因之一。

不加:host能选中#table、加了反而失效是作用域规则导致的：

• vaadin-grid.css是Grid组件的内部样式文件，它的默认作用域就是Grid的Shadow DOM内部，直接写#table就会匹配Shadow Root下id为table的内部元素，不需要额外前缀。
• :host选择器的作用是选中Shadow DOM对应的宿主元素（也就是外层的<vaadin-grid>标签本身），之前写的:host > table逻辑是找宿主元素的直接子table，但#table是Shadow Root的子节点，不是宿主标签的直接子节点，选择器逻辑完全错误，自然不会生效。

根据可修改的文件范围，选对应方案即可：

方案1：直接修改vaadin-grid.css（最简便） #

把之前写在这个文件里的打印媒体查询改成下面的写法，不要加:host前缀，和之前生效的普通样式保持同个作用域：

@media print {
  #table th {
    /* 修正拼写错误，加!important覆盖组件默认样式 */
    background-color: green !important;
    /* 强制浏览器打印时保留背景色，否则默认会忽略背景样式 */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

方案2：从全局样式文件统一控制（适合不想修改组件源文件的场景） #

因为Shadow DOM的隔离，直接在shared-style.css里写#viewfgrid #table是穿不透样式边界的，需要用Vaadin官方支持的主题模块注入方式，把样式注入到Grid的内部作用域：

1. 在引入全局样式的HTML/JS文件中，添加针对vaadin-grid的主题模块：

<dom-module id="grid-print-style" theme-for="vaadin-grid">
  <template>
    <style>
      @media print {
        /* 仅对id为viewfgrid的Grid生效，不需要的话可以去掉:host()的条件判断 */
        :host(#viewfgrid) #table th {
          background-color: green !important;
          -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
        }
      }
    </style>
  </template>
</dom-module>

这里的:host(#viewfgrid)是Shadow DOM内部的正确写法：代表「当当前组件宿主（vaadin-grid标签）的id为viewfgrid时，匹配内部的#table th元素」。
2. 确保这个dom-module在页面加载Grid组件之前引入即可生效。

• 所有打印场景下的背景色、边框样式都必须添加print-color-adjust: exact属性，否则Chrome、Edge等浏览器默认会在打印时移除所有背景样式，哪怕选择器写对了也看不到效果。
• 不要尝试在全局CSS中用普通后代选择器直接选Web Components内部的元素，这类选择器无法穿透Shadow DOM边界，永远不会生效。

内容的提问来源于stack exchange，提问作者microwth