Стиль Shadow Dom в Vaadin Flow

Я написал обертку потока vaadin для этого полимерного элемента:

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

Это работает. Документация simple-dropdown говорит мне, что я могу стилизовать теневое пространство с помощью этого css:

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

Однако я не могу найти подходящее место для этого CSS в потоке Vaadin. Куда мне его поставить?


css web-component vaadin-flow polymer shadow-dom
person F43nd1r    schedule 15.11.2018    source источник
comment
На основе документов vaadin у вас есть несколько вариантов: vaadin.com/docs /v11/flow/theme/theming-crash-course.html   -  person Teo Dragovic    schedule 22.11.2018

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать его в родительском стиле, например:

мой-элемент.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>

person HakanC    schedule 16.11.2018
comment
Я попытался перетащить этот файл в папку webapp / frontend, но ничего не изменилось. Я также пробовал добавить @HtmlImport("frontend/my-element.html") в класс, но это тоже не сработало. Как мне загрузить ваш фрагмент? - person F43nd1r; 19.11.2018
comment
Не уверен, что понял тебя. У вас уже есть полимерное приложение. Или вы просто пробуете элемент. Если второе, то здесь, по этой ссылке, есть много образцов полимеров: codepen.io/tony19 - person HakanC; 19.11.2018
comment
Это не полимерный проект. Это проект vaadin flow, который позволяет загружать полимерные компоненты. - person F43nd1r; 19.11.2018
comment
Извините, я понятия не имею о потоке vaadin. - person HakanC; 19.11.2018

arrow_upward
0
arrow_downward

веб-приложение / интерфейс / стили / общие-стили.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 {
...
}
person F43nd1r    schedule 28.11.2018