Работа с Ваадином Themable Mixin в лит-элемент - PullRequest
Новая
       43

Работа с Ваадином Themable Mixin в лит-элемент

1 голос
/ 09 июня 2019

Попытка стилизовать компонент текстового поля vaadin.Поскольку части, которые мне нужно стилизовать, находятся внутри теневого домена, мне нужно определить модуль темы, который нацелен на атрибут theme-for.У Ваадина есть документация о том, как это сделать с помощью 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:

import {LitElement, html} из '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);

и ... 

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

Пользовательские стили теневого домена не применяются.Как проще всего создать стиль теневого компонента vaadin?

...