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?