How to write Media Queries in Shadow DOM?

Flow
1

I have tried this to style a textfield in a formlayout:

<dom-module theme-for="vaadin-text-field" id="custom-text-field">
	<template>
		<style>
			:host(.my-text-field) [part="input-field"]
 {
				@media (max-width: 1023px) {
					width: 20em;
				}
				@media (min-width: 1024px) {
					width: 50em;
				}
			}
		</style>
	</template>
</dom-module>

But that syntax isn’t even recognized. How to do it properly?

Many thanks for any pointers,

Ulrich

2

Hi,
the right syntax for the media query in Shadow DOM is:

<dom-module id="custom-text-field" theme-for="vaadin-text-field">
  <template>
    <style>
      @media (max-width: 1023px) {
        :host(.my-text-field) [part="input-field"]
 {
          width: 20em;
        }
      }
      @media (min-width: 1024px) {
        :host(.my-text-field) [part="input-field"]
 {
          width: 50em;
        }
      }
    </style>
  </template>
</dom-module>

Regards

3

Works great, thank you! I thought I tried that variant myself before, but apparently I messed up something else at that time.