Skip to content

Commit 98062f2

Browse files
committed
Fix bad hidden example in Polymer article
1 parent 59010e7 commit 98062f2

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

packages/lit-dev-content/site/articles/article/lit-for-polymer-users.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -580,10 +580,10 @@ When migrating a Polymer `dom-if` to Lit, you have several choices:
580580
- Use the standard `hidden` attribute to hide the content without removing it from the page.
581581

582582
```html
583-
<header hidden=${this.headerHidden}>
583+
<header ?hidden=${this.headerHidden}>
584584
```
585585

586-
This is quite lightweight. However, the DOM is created on first render even if the condition is false.
586+
Note that you must use a [boolean attribute binding](/docs/templates/expressions/#boolean-attribute-expressions) so that the `hidden` attribute is removed when the condition is falsey. A regular attribute binding will set the `hidden` attribute to the string `"false"`, which [in HTML is an invalid value that keeps the element hidden](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden).
587587

588588
- Wrap a conditional in the `cache` directive to avoid discarding and re-creating the DOM when the condition changes.
589589

0 commit comments

Comments
 (0)