Polymer styling: how to select by CSS class

Flow
1

Hi,

I’m trying to style a TextField, but only if it is assigned the specific mzNumberField class.

I tried this code:

<dom-module id="mz-vaadin-number-field" theme-for="vaadin-text-field">
	<template>
		<style>

			[part="input-field"]
 {
				width: 7.00em !important;
			}

			[part="value"]
 {
				text-align: right !important;
			}

		</style>
	</template>
</dom-module>

but it obviously selects all the TextFields.

I tried to prefix the selectors with .mzNumberField (classic CSS syntax) but it won’t work.

Any help please?

Thanks,
MZ

2

Replying to myself: :host-context(.mzNumberField) did the trick, but only on Chrome.

<dom-module id="mz-vaadin-number-field" theme-for="vaadin-text-field">
	<template>
		<style>

			:host-context(.mzNumberField) [part="input-field"]
 {
				width: 7.00em !important;
			}

			:host-context(.mzNumberField) [part="value"]
 {
				text-align: right !important;
			}

		</style>
	</template>
</dom-module>

Is there any way to get the same result in Firefox too?

Thanks,
MZ

3

Replying to myself again: the answer was using scoping selectors, as stated [here]
(https://github.com/vaadin/vaadin-themable-mixin).

<dom-module id="mz-vaadin-number-field" theme-for="vaadin-text-field">
	<template>
		<style>

			:host(.mzNumberField) [part="input-field"]
 {
				width: 10.00em !important;
			}

			:host(.mzNumberField) [part="value"]
 {
				text-align: right !important;
			}

		</style>
	</template>
</dom-module>

MZ