Vaadin Flow 中的 Shadow Dom 样式

Question

我已经为 this polymer element 编写了一个 vaadin 流包装器：

@Tag("simple-dropdown")
@HtmlImport("bower_components/simple-dropdown/simple-dropdown.html")
public class DropdownMenu extends Component implements HasComponents, HasSize, HasStyle {
    ...
}

这行得通。 simple-dropdown 的文档告诉我可以用这个 css:

设置阴影 dom 的样式

simple-dropdown {
    --simple-dropdown-toggle: {
        justify-content: right;
    }
}

但是，我无法在 Vaadin 流中为这个 css 找到合适的位置。我必须把它放在哪里？

Answer 1

您可以在父级的样式中使用它，例如：

我的-element.html

 <link rel="import" href="polymer/polymer.html"> 
 <dom-module id='my-element'>
 <template>
    <style>
        :host {
          display:block;
        }
        simple-dropdown {
           --simple-dropdown-toggle: {
                  justify-content: right;
            }
        }

    </style>

    <simple-dropdown origin="top right" label="menu" arrow>
          <a href="#">item</a>
    </simple-dropdown>
 </template>

Answer 2

webapp/frontend/styles/shared-styles.html

<custom-style>
    <style>
        simple-dropdown {
            --simple-dropdown-toggle: {
                justify-content: right;
            };
        }
    </style>
</custom-style>

然后，在顶层布局（不是流包装器！）

@HtmlImport("frontend://styles/shared-styles.html")
public class MainView extends Div {
...
}

Vaadin Flow 中的 Shadow Dom 样式

Shadow Dom Style in Vaadin Flow

css

web-component

shadow-dom

polymer

vaadin-flow