Vaadin-combo-box: 允许指定叠加宽度

我们有描述的确切问题；
对于位置输入，典型的代码是“SVG”，标题为“Stavanger Airport Sola”
这是一个内网应用程序，所以我们的用户记住了大部分代码，并且想写“SVG”而不是“Stavanger...”
此外，我们在可编辑的网格中将其中的几个彼此相邻。 空间很紧，所以我们希望列和组合框的大小适合代码，而不是标题。

Vaadin 提出了一种解决方法，它解决了我们眼前的问题：

<strong i="10">@CssImport</strong>
    ( id        = "vaadin-combo-box-overlay-override"
    , value     = "./styles/vaadin-combo-box-overlay.css"
    , themeFor  = "vaadin-combo-box-overlay"
    )

./styles/vaadin-combo-box-overlay.css：

:host {
     width: 500px !important;
}

或者，如果您只想在某些组合框上使用它：

:host([theme~="large"]) {
     width: 500px !important;
}

combobox.getElement().setAttribute("theme", "large");

vaadin/vaadin-combo-box/issues/529 的副本。

在https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447 查看建议的演示改进

动态更新 ComboBox 覆盖宽度：

:host([theme="my-combo-box"]) {
  width: var(--my-combo-box-overlay-width, 200px) !important;
}

UI.getCurrent().getPage().executeJs("ShadyCSS.styleDocument({'--my-combo-box-overlay-width': $0 + 'px'})", newWidthAsInteger);

Web 组件中现在有一个新功能可以简化此操作（已关闭问题 https://github.com/vaadin/vaadin-combo-box/issues/529，请参阅合并 PR https://github.com/vaadin/ vaadin 组合框/拉/876）

这个问题现在应该是关于提供一个辅助方法，例如setOverlayWidth(String cssLength)来设置这个新的 CSS 自定义属性--vaadin-combo-box-overlay-width 。

我可以确认以下代码按照@Haprog 的建议运行良好

comboBox.getElement().getStyle().set("--vaadin-combo-box-overlay-width", "400px")

新的文档站点有使用上述功能的示例：
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width