Overview
LitElement is a library built on top of web components. It relies on the underlying Custom Web Components standards, as well as the lit-html template literals library. And, although WC's standards technologies perform the heavy lifting, LitElement and lit-html provide nice abstraction layers and utilities on top of those standards to reduce the amount of boilerplate required to create and manage from the simplest components, all the way to higher-order components.
Requirements to earn badge
The documentation for both LitElements and lit-html are fairly complete, but don't forget that the components they build still rely on Custom Web Components, and the documentation for that technology is always relevant even when working directly with LitElement and/or lit-html concepts. The documentation pages for LE and lit-html will be your primary sources of info for those techs.
lit-element
Go over the LitElement Documentatio/Guide.
LitElement is the technology that glues everything together and that provides the highest abstraction layer in the Badgelist application components.
* [LitElement Guide](https://lit-element.polymer-project.org/guide)
Pay particular attention to these sections: `Templates`, `Styles`, `Properties`, `Events` and `Lifecycle` sections.
lit-html
Go over the LitElement Documentatio/Guide.
lit-html is a simple, but powereful and fast HTML templating library for JavaScript. It allows the use of template literals for constructing HTML templates to use as the HTML templates of our Web Components with LitElement.
* [lit-html Guide](https://lit-html.polymer-project.org/guide)
Make sure to pay particular attention to the following sections:
- Writing templates
- Creating directives
- Concepts
More References: Other relevant tutorials (go through these if you feel you need more perspectives)
* [Let's Build Web Components! Part 5: LitElement](https://dev.to/bennypowers/lets-build-web-components-part-5-litelement-906)
* [Starting a LitElement project (it helps to know Redux)](https://vaadin.com/tutorials/lit-element/starting-a-lit-element-project)
* [Lit Element Interactive Demos - Basic, Intermediate, Advanced](https://open-wc-lit-demos.stackblitz.io/basic)
* [Interactive Haunted Demos (like React Hooks) - Basic, Intermediate, Adv | @open-wc](https://open-wc-haunted-demos.stackblitz.io/basic)
Labs
Work through the following two codelabs to get a better feel for LitElement and lit-html.
When you finish each codelab, customize each in a couple of ways that is evident on a screenshot of the final result. Post that customized snapshot as evidence.
lit-html and lit-element: Basics
- https://open-wc.org/codelabs/basics/lit-html.html?index=/codelabs/#0
lit-html and lit-element: Intermediate
- https://open-wc.org/codelabs/intermediate/lit-html.html?index=/codelabs/#0Answer these Questions
Provide simple answers to the following few questions
* What is the difference between a property and an attribute?
* Which one would you use to pass a large complex object into the component?
* Inside a component event handler, what does this refer to?
* Which Custom event flags need to be set (if any) for an event to cross the Shadow DOM boundary?
* List 2 lifecycle methods that LitElement inherits from Custom Web Components.
* list 3 ways to provide CSS styles to our Web Components
* Does the CSS cascade extend beyond the Shadow Root?
* Provide 1 or 2 ways you can pass CSS styles across the shadow root?
