在lit-element中使用vaadin主题混合

Question

正在尝试设置vaadin-text-field组件的样式。因为我需要设置样式的部分在卷影dom中，所以我需要定义一个针对“to for”属性的主题模块。Vaadin有关于如何使用聚合物做到这一点的文档。

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

我该如何在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>

已尝试使用属性theme-for创建自定义元素：

从‘lit-element’导入{ LitElement，html }；

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);

还有..。

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

我还尝试了内联样式：

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

不应用阴影dom的自定义样式。设置vaadin组件的卷影dom的样式最简单的方法是什么？

Answer 1

根据vaadin-themable-mixin documentation的说法，在使用ES模块时，您应该使用registerStyles实用程序。

示例：

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);
      }
    `)
  }