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

Я создал настраиваемый элемент, используя 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;
      }
    }`

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

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

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


polymer lit-element polymer-3.x
person Igor Gomez    schedule 22.12.2018    source источник
comment
Я не знаю почему, но вместо этого вы можете изменить цвет текста заголовка с помощью paper-card { --paper-card-header-color:blue; }   -  person HakanC    schedule 26.12.2018
comment
Спасибо, но мой вопрос больше связан с тем, как использовать миксин стилей, поскольку цвет заголовка-карточки-бумаги не является миксином   -  person Igor Gomez    schedule 08.01.2019

Ответы (2)


arrow_upward
0
arrow_downward

Чтобы использовать примесь CSS:

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

демонстрация

person tony19    schedule 02.02.2019

arrow_upward
0
arrow_downward

CSS-миксины использовались Polymer, но не работают с адаптированными таблицами стилей Lit. Вы можете добавить <style> в шаблон, а затем запустить к нему скрипт применения стилей, но это неуклюже и может привести к появлению нестилизованного DOM перед его изменением.

Лучший способ использовать устаревший Polymer - это сопоставление переменных CSS миксина с реальными собственными переменными CSS, на которые вы можете ссылаться.

Итак, вместо:

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

Вызовите базовое свойство миксина:

css`
paper-card {
  --paper-card-header-text_-_color: blue;
}`

Однако в конкретном случае цвет заголовка <paper-card> также является прямой переменной:

css`
paper-card {
  --paper-card-header-color: blue;
}`
person Keith    schedule 30.04.2021