Vaadin component styling confusion

Question

I am trying to access the individual parts of elements which you have to go through the shadow DOM. I have been trying to do it like in this guide: https://github.com/vaadin/vaadin-themable-mixin/wiki/1.-Style-Scopes

Adding this code to my shared-styles.html file works fine:

vaadin-text-field {
  border: 1px solid gray;
}

Then for accessing specific parts of the element to style, it shows to access it like this:

#shadow-root (open)
  <style>
    :host {
      border: 1px solid gray;
    }
  </style>

And that you can access the specific parts (input-field in this case) like this:

#shadow-root
  <style>
    [part="input-field"] {
      border: 1px solid gray;
    }
  </style>

I just do not understand how the last 2 code blocks are supposed to identify that they are changing 'vaadin-text-field' as it is nowhere in the code snippet. Adding those snippets alone of course do not work.. I feel like it's something simple I am overlooking. Thank you so much, I appreciate all of the great help available for Vaadin!

Answer 1

Check the Stylable Shadow Parts section of the docs. It gives some examples that would be helpful.

Shortly, to style a Vaadin component (like <vaadin-text-field>) you would need to add your styles into the shadow DOM of the component. In order to do that define a style module with a theme-for="vaadin-text-field" attribute and place your custom styles there. Before the first render Vaadin components look for style modules with the theme-for attribute and pick styles from there.

<dom-module id="my-input-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      [part="input-field"] {
        border: 1px solid gray;
      }
    </style>
  </template>
</dom-module>

<vaadin-text-field label="Username"></vaadin-text-field>

Here is a live example: https://glitch.com/edit/#!/theming-vaadin-components-npm-p3?path=custom-theme.js:4:0

The example above would change the styles of all <vaadin-text-field>s in the app. If you want to style only some text fields, use a theme or an attribute selector:

<dom-module id="my-input-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      :host([theme~="bordered"]) [part="input-field"] {
        border: 3px solid hotpink;
      }
    </style>
  </template>
</dom-module>

<vaadin-text-field label="Themed" theme="bordered"></vaadin-text-field>

Answer 2

The last examples would require you to actually edit the contents of the style-tag inside the component.

At the bottom of that page you'll find a Read next: Adding Styles to Local Scope.