theme not applied

Flow
1

Hi!

We have a view containing a vaadin-grid. In this grid we add a custom component as details. This custom component only contains a vaadin-button with a theme-tag:

<link rel="import" href="./theme/sc/sc-button.html">
<dom-module id="grid-details">
    <template>
		<vaadin-button id="closeButton" theme="close-button-theme">
			Close Panel
		</vaadin-button>
	</template>
    <script>
		...
	</script>
</dom-module>

the theme file looks like this:

<dom-module id="product-grid-details-theme" theme-for="vaadin-button">
    <template>
        <style>
            :host([theme~="close-button-theme"]
) {
                height: 30px;
                width: 99px;
                padding: 0;
                min-width: 0;
                min-height: 0;
                background: #E4E4E4;
                color: black;
                margin-right: 16px;
            }
        </style>
    </template>
</dom-module>

When i open the details-column the styles are not applied. I moved the button out of the details direct in the main-view and the styles are applied. So it seems like that it’s only not workin in the grid-details. Is there a solution for this problem or have i done something wrong?

Thank you in advance

2

Hi, that sounds like a bug with the component. Can i ask you to reproduce this problem with a simple project like [flow app starter]
(https://github.com/vaadin/skeleton-starter-flow)?

3

I think the problem is that the details template is run through Polymer templatized, and if you want to bind to attributes (vs properties) you need to use the special attribute$="value" syntax.

So try this:

<link rel="import" href="./theme/sc/sc-button.html">
<dom-module id="grid-details">
    <template>
		<vaadin-button id$="closeButton" theme$="close-button-theme">
			Close Panel
		</vaadin-button>
	</template>
    <script>
		...
	</script>
</dom-module>
4

Hey,

if i change theme=“close-button-theme” to theme$=“close-button-theme” the theme is not applied at all :frowning:

5

Yeah, my suspicion was probably incorrect. If there’s no data binding used, it should not be necessary to use $=.

So my next assumption is that the <dom-module id="product-grid-details-theme" theme-for="vaadin-button"> is imported later that vaadin-button. All ”theme modules” should be imported and before the component they target are upgraged. Any themes loaded after that will not be picked up by the component.