Styling a web component part inside another web component

Flow
1

If I have a web component like vaadin-combo-box that’s made out of other web components, and I want to target some specific inside part of a sub-component, how do I do it?

I understand I can target a specific part of a web component like this:

  <dom-module id="textfield-theme" theme-for="vaadin-text-field">
    <template>
      <style>
	    /* style the "label" parts inside text fields with the "mystyle" class */
        :host(.mystyle)[part="label"]
 {
          color: darkmagenta;
        }
      </style>
    </template>
  </dom-module>

But how to target a specific part inside a web component that’s inside another part, like the vaadin-text-field’s label inside a vaadin-combo-box?

2

You can add a theme attribute to the host ComboBox component (adding the attribute with comboBox.getElement().setAttribute("theme", "your-theme")), and it will propagate to the internal <vaadin-text-field> of the ComboBox. After that you can write a style dom-module for vaadin-text-field with :host([theme=“your-theme”]
) … selector to style the text-field internals within that particular ComboBox. For example adding this to your style file

<dom-module id="my-field-theme" theme-for="vaadin-text-field">
    <template>
        <style>
		:host([theme="your-theme"]
) {
			color: red;
		}
        </style>
    </template>
</dom-module>

would style the text color of the text-field inside that ComboBox red.

3

Here’s a tutorial on component theming:

https://github.com/vaadin/vaadin-themable-mixin#readme

4

Martin Israelsen:
Here’s a tutorial on component theming:

https://github.com/vaadin/vaadin-themable-mixin#readme

It doesn’t mention the theme attribute thing, though.

5

Olli Tietäväinen:

Martin Israelsen:
Here’s a tutorial on component theming:

https://github.com/vaadin/vaadin-themable-mixin#readme

It doesn’t mention the theme attribute thing, though.

You’re absolutely right. I didn’t check whether it did…

6

At least now there’s a ticket: https://github.com/vaadin/vaadin-themable-mixin/issues/47

7

Thanks Katri Haapalinna, what you ve suggested works for me :slight_smile:

8

Note: I edited the above posts to update the links to [vaadin-themable-mixin documentation]
(https://github.com/vaadin/vaadin-themable-mixin#readme). The content was moved from wiki to readme. Currently the old wiki pages still link forward to the readme, but the wiki pages might get removed in the future.