Update styles documentation #126
Conversation
|
A live preview of this PR will be available at the URL(s) below. https://pr126-7ccb8d1---lit-dev-bvxw3ycs6q-uw.a.run.app/ |
| @@ -0,0 +1,13 @@ | |||
| import { LitElement, html, css, customElement } from 'lit-element'; | |||
There was a problem hiding this comment.
Update to lit and lit/decorators throughout
|
|
||
| We recommend using CSS properties to create [customizable styles](#customizable). However, you can also include `<style>` elements in a LitElement template. These are updated per instance. | ||
| We recommend placing your styles in a static `styles` property for optimal performance; however, the element's static `styles` are evaluated **once per class**. Sometimes, you might need to customize styles **per instance**. For this, we recommend using CSS properties to create [themable elements](#theming). Alternatively, you can also include `<style>` elements in a LitElement template. These are updated per instance. |
There was a problem hiding this comment.
We say "We recommend placing your styles in a static styles" 3x in the doc... I guess the redundancy is intentional given the perf impact?
| {% include projects/style/perinstanceexpressions/my-element.js %} | ||
| ``` | ||
| * Separate styles that require per-instance evaluation from those that don't. | ||
| * Evaluate per-instance CSS properties by creating an expression that captures that property inside a complete `<style>` block. Include it in your template. |
There was a problem hiding this comment.
This statement is hard to follow, not sure what "Evaluate per-instance CSS properties" means.
| import { customElement } from 'lit/decorators/custom-element'; | ||
| import { property } from 'lit/decorators/property'; | ||
| import { classMap } from 'lit/directives/class-map'; | ||
| import { styleMap } from 'lit/directives/style-map'; |
There was a problem hiding this comment.
I think its fine to just do import {customElement, property} from 'lit/decorators'; (at least that's what I've been doing in examples...
|
|
||
| </div> | ||
|
|
||
| ### Inheriting styles | ||
| ### Inheriting styles from a superclass | ||
|
|
||
| Using an array of tagged template literals, a component can inherit the styles from a LitElement superclass, and add its own styles: |
There was a problem hiding this comment.
The phrase LitElement superclass seems kind of awkward. Can we just say superclass here?
Co-authored-by: Arthur Evans <arthure@google.com>
Co-authored-by: Arthur Evans <arthure@google.com>
Co-authored-by: Arthur Evans <arthure@google.com>
Co-authored-by: Arthur Evans <arthure@google.com>
Fixes #59 and #60. Refines text and examples for consistency and presentation.