Working with vaadin themable mixin in lit-element

Viewed 700

Trying to style a vaadin-text-field component. Because the parts I need to style is inside the shadow dom, I would need to define a theme module that targets the "theme-for" attribute. Vaadin has documentation on how to do this with Polymer.
https://github.com/vaadin/vaadin-themable-mixin

How I would do this in Lit-Element?

<dom-module id="my-text-field-theme" theme-for="vaadin-text-field">
  <template>
    <style>
      [part="input-field"] {
        background-color: var(--input-field-background-color, #fff);
      }
    </style>
  </template>
</dom-module>

<!-- Use the new custom property -->
<custom-style>
  <style>
    .some-part-of-my-app vaadin-text-field {
     --input-field-background-color: #eee;
    }
  </style>
</custom-style>

Tried creating a custom element with attribute theme-for:

import { LitElement, html } from 'lit-element';

class MyVaadinText extends LitElement {   
  render() {
    return html` 

  <style>
    [part="input-field"] {
        border:solid 3px #F00;
    }
    vaadin-text-field {
     --input-field-background-color: #eef;
    }
    :host(.custom-style) [part="input-field"] {
        border: 1px solid #ccc;
        background-color: #fff;
    }    

  </style>    
  <vaadin-text-field class="custom-style"></vaadin-text-field>  
    `;
  }

  static get properties() {
    return {
      themeFor: { type: String },
    };
  }
  constructor() {
    super();
    console.log('constructor get-started-vaadin-style...');
    this.themeFor='vaadin-text-field';
  }
  firstUpdated() {
    console.log('get-started-vaadin-style...');
  }
} customElements.define('my-vaadin-text', MyVaadinText);

and...

import './my-vaadin-text.js';
<my-vaadin-text ></my-vaadin-text>

Also tried inline style:

    <vaadin-text-field id="first" placeholder="First Name" value="" 
                style="--input-field-background-color: #0F0;" >

Custom styling of the shadow dom is not applied. What is the easiest way to style the shadow dom of a vaadin component?

1 Answers

According to the vaadin-themable-mixin documentation, when working with ES modules you should use the registerStyles utility.

Example:

import { registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js'

class MyVaadinText extends LitElement {   
  constructor() {
    super()
    registerStyles('vaadin-combo-box', css`
      :host([theme~="suggest"]) [part="toggle-button"]::before {
        content: var(--lumo-icons-search);
      }
    `)
  }
Related