Question

尝试设置vaadin文本字段组件的样式。因为我需要设置样式的部件在阴影dom内，所以我需要定义一个针对“ theme-for”属性的主题模块。 Vaadin拥有有关如何使用Polymer进行此操作的文档。
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);
      }
    `)
  }

在轻元素中使用vaadin可将他们的mixin

1 个答案: