LitElement - не добавлять атрибут, если значение равно false - PullRequest
Новая
       39

LitElement - не добавлять атрибут, если значение равно false

1 голос
/ 24 апреля 2020

Есть ли способ в основном визуализировать эти три возможности: 

<my-el someValue="a"></my-el>
<my-el someValue="b"></my-el>
<my-el></my-el>

Обратите внимание на явное отсутствие атрибута someValue на третьем.

Чтобы сделать это нормально, я бы сделал : 

render() {
  const someValue = "a";

  return html`
    <my-el someValue=${someValue}></my-el>
  `;
}

Но если бы someValue было undefined, оно выглядело бы как <my-el someValue="undefined"></my-el>, что мне не нужно.

Есть ли способ получить булево-подобное поведение для ложных, но показать значение для истинных ценностей? Я читаю документы, но, надеюсь, я что-то упустил.

Причина, по которой я хочу это сделать, заключается в том, что я хотел бы иметь селектор CSS, который влияет на все из них, которые имеют [someValue] независимо от того, фактического значения, но не применять его, если его там нет.

PS, я знаю обходные пути, такие как использование :not([someValue=undefined]) или возврат условного HTML, поэтому, пожалуйста, не ответь тем. Я использую один из них прямо сейчас, но если есть прямой ответ на мой вопрос, в надежде заменить его на немного более чистый код. Спасибо.

1 Ответ

2 голосов
/ 24 апреля 2020

Вы можете просто использовать директиву ifDefined для этого. Для AttributeParts он устанавливает атрибут, если определено someValue, и удаляет атрибут, если someValue не определено. Затем вы можете дополнительно изменить его, используя троичный оператор, чтобы также проверить значения falsy : 

import {ifDefined} from 'lit-html/directives/if-defined';

return html`
   <my-el someValue=${ifDefined(someValue ? someValue : undefined)}></my-el>
`;
...