Как оформить бумажную карточку (Polymer 3), включенную в пользовательский компонент LitElement, используя миксин - PullRequest
Новая
       58

Как оформить бумажную карточку (Polymer 3), включенную в пользовательский компонент LitElement, используя миксин

0 голосов
/ 22 декабря 2018

Я создал пользовательский элемент, используя LitElement в Polymer 3. Я включил элемент бумажной карты в этот пользовательский элемент.Я хотел бы использовать стили миксинов, которые уже определены, чтобы стилизовать эту бумажную карточку, но я не могу.Например, paper-card определить этот миксин: 

--paper-card-header-text

https://www.webcomponents.org/element/@polymer/paper-card/elements/paper-card

Я попробовал почти все, чтобы использовать этот миксин внутри моего пользовательского элемента, но не работает.Например: 

`paper-card{
      --paper-card-header-text:{
         color: blue;
      }
    }`

Я также импортировал полифилл mixin, но ничего не было 

`import @webcomponents/shadycss/entrypoints/apply-shim.js;`

Мне нужна помощь Спасибо

1 Ответ

0 голосов
/ 02 февраля 2019

Для использования CSS mixin:

  1. Импорт Shady CSS ApplyShim в index.html: 

    <script src="./node_modules/@webcomponents/shadycss/apply-shim.min.js"></script>

  2. В пользовательский элемент render() вставьте CSS-миксины в блок <style>: 

    class MyElement extends LitElement {
  render() {
    return html`
      <style>
        paper-card {
          --paper-card-header-text: {
            color: blue;
          };
        }
      </style>
      <paper-card>...</paper-card>
      `
  }
}

demo

...