https://github.com/rudifa/from-web-component-to-lit-element

Learning from codelab 'From Web Component to Lit Element'
https://github.com/rudifa/from-web-component-to-lit-element

Last synced: 24 days ago
JSON representation

Learning from codelab 'From Web Component to Lit Element'

• Host: GitHub
• URL: https://github.com/rudifa/from-web-component-to-lit-element
• Owner: rudifa
• Created: 2022-11-22T23:31:59.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2022-11-22T23:32:10.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T01:41:19.012Z (about 1 month ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# From Web Component to Lit Element

> created with

> `npm create vite@latest from-web-component-to-lit-element`

Based on code from the codelab [From Web Component to Lit Element](https://codelabs.developers.google.com/codelabs/the-lit-path).

The codelab shows how the LitElement abstracts away the details of the HTMLElement use, making the resulting web component code more compact and more expressive.

I kept the 3 web component versions for easy comparison:

- `rating-htmlelement` corresponds to the checkpoint in the step 7 of the codelab

- `rating-htmlelement2` corresponds to the checkpoint in the step 8 of the codelab

- `rating-litelement` corresponds to the checkpoint in the step 9 of the codelab

In the original codelab code the complcated interactions between the thumbs buttons and the rating provide an unnecessary distraction, so I simplified handling of these items.