Update Component overview content #25
Conversation
| order: 1 | ||
| --- | ||
|
|
||
| A Lit component is a reusable piece of UI. You can think of a Lit component as a container that has some state and that displays its state to the user. It may also react to user input, fire events—anything you'd expect a UI component to do. |
There was a problem hiding this comment.
It might be nice to have a little section on firing events that basically just says you should do it to notify that the state of the element has changed (e.g. a slider) and that you should use the native dispatchEvent and either addEventListener or a lit event expression...
There was a problem hiding this comment.
Where would you picture this going in the section?
Co-authored-by: Steve Orvell <sorvell@google.com>
|
A live preview of this PR will be available at the URL(s) below. https://pr25-04ecbe6---lit-dev-bvxw3ycs6q-uw.a.run.app/ |
|
|
||
| * A *render method* that's called to render the components' contents. In the render method, you define a *template* for the component. | ||
|
|
||
| Lit also provides a set of lifecycle methods that you can override to hook into the component's lifecycle (for example, to run code whenever the component updates). |
There was a problem hiding this comment.
I'm wondering if this sentence is necessary just yet. We could get to the example faster without it. And if the update lifecycle is up there in importance with properties and render(), maybe it should have a short section on this page following "Reactive Properties"?
There was a problem hiding this comment.
I'm happy to remove it if you think it's OK.
There was a problem hiding this comment.
I think it makes sense for it to have its own very short section along with "Styling" as I mentioned elsewhere. Then the page outline would look like:
- A Lit component is an HTML element
- Rendering, templates
- Styles
- Reactive properties
- Reactive lifecycle
which is kind of a great tweet-sized summary of LitElement on its own
There was a problem hiding this comment.
I'm holding off on this for now because reorganizing into these buckets is going to require a fairly major rewrite to the section.
|
|
||
| Here's a sample component: | ||
|
|
||
| {% playground-example "docs/components/overview/simple-greeting" "simple-greeting.ts" %} |
Can't stage ATM