While seemingly simple, we're going to use a button to ensure that everyone can get on the same page about some concepts that translate to ANY project you'll ever work on.
All the considerations of a simple button:
- What makes a solid tool-chain using Open-wc to build our element.
- Security - Why Google Lighthouse suggests some security implications on links?
- Accessibility - What is it? How do we account for it?
- Platform specific event issues (and why
caniuse.com
is your friend)
-
CSS - how to use CSS variables and parts to allow styling
- Shadow Dom - What is it? Why is it good? Why am I seeing article about how bad it is?
- HTML - built in styles, semantics, and how to correctly make a button
- Reuse - How to use other developer's code in your web component
- Publishing - how to get it to NPM for others to use
- Creating and implementing a design from a comp
- Properties vs attributes and how they are used in Lit to create a smart element
Below is a rendering of the following file in the course repo: https://github.com/elmsln/edtechjoker/blob/master/fall-21/projects/p1-button/README.md
