2

このポリマー要素の 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 の適切な場所を見つけることができません。どこに置く必要がありますか？

4

2 に答える 2

0

次のような親のスタイルで使用できます。

my-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>

于 2018-11-16T18:56:00.823 に答える