Sharing Styles between Component Types

The same block of CSS can be applied in a number of ways to multiple component types, such as all text input fields like Text Fields, Number Fields and Combo Boxes.

Multiple separate selectors can be specified for the same CSS by separating them with commas, like so:

vaadin-text-field::part(input-field), vaadin-number-field::part(input-field) {
  background: white;
  border: 1px solid gray;
}

To avoid repeating the same part or state selector for each root element, you can wrap the element types in a :where and apply the part or state selectors to that instead:

:where(vaadin-text-field, vaadin-number-field)::part(input-field) {
  background: white;
  border: 1px solid gray;
}

If you know that all components with a particular part or state should get the same CSS, you can even omit the root element entirely:

::part(input-field) {
  background: white;
  border: 1px solid gray;
}

The above example applies the CSS to input-field parts in all components that have one.