vaadin网格表格列宽控制与css答案

【问题标题】：vaadin grid table column width control with cssvaadin网格表格列宽控制与css
【发布时间】：2018-08-07 16:47:42
【问题描述】：

在我的 Polymer 2.0 项目中，我使用了 vaadin-grid#3.0.2。有一个包含大量数据的网格 - 20 多列，因此在 div 内有一个溢出-y 滚动。由于数量众多，网格内的列宽会减小。父 div 有一个 display: flex 属性，以便自动生成列的宽度。 我们可以用 CSS 设置列的最小宽度吗？或者我可以用 CSS 控制它吗？

无法在此处重现问题代码，因为数据来自外部服务器（Oracle VM VirtualBox）。

这是 HTML 中使用的代码：

<vaadin-grid class="projectworksheet" name="worksheet" items="[[projectData]]" page-size="10"></vaadin-grid>

这是渲染网格的截图，vaadin-grid在#shadow-root下自动生成<vaadin-grid-table id="scroller">我想，这就是为什么我不能用CSS控制列min-width。

【问题讨论】：

标签： html css polymer-2.x

【解决方案1】：

单独使用 CSS 无法跨越 shadow dom 边界，这意味着您无法从 vaadin-grid 组件外部设置宽度，除非它们提供了 mixin 或 css 变量。

但是，您可以使用 javascript 访问 shadowDom 中的元素并设置它们的 css 属性。例如：document.querySelector('vaadin-grid.projectworksheet').shadowRoot.querySelector('vaadin-grid div.col').style.width = '100px'

【讨论】：

它需要什么功能吗？还是只使用 doc querySelector？
您可以在控制台中尝试它，如果它可以找到正确的元素，那么该行应该可以工作。尝试是一部分一部分的。
您可以使用 document.querySelectorAll('*') 进行调试此外，每次必须访问 shadowDom 中的元素时，您都需要使用 querySelector