Overview
Web Components are a Web Standard for building custom elements for frontend applications. They are based on three evolving web standards:
* Custom Elements
* Shadow DOM
* HTML Templates
At Badgelist, we use a couple of libraries (lit-element and lit-html) that provide a thin layers on top of these web standards, and so it is very helpful to understand the base on which those libraries are built on.
LitElement and lit-html will take care of a lot of boilerplate and provide utilities to make it easier to work with web components. Each of these will have their own badge learning-modules.
References
The documentation at Mozilla's MDN is fairly comprehensive about the many parts that make up Web Components, in addition to pointing to a few examples.
Make sure to visit the page and refer to the various sections to get a good overview of Web Components and related concepts.
* [Web Components Documentation - MDN](
https://developer.mozilla.org/en-US/docs/Web/Web_Components)
Make sure to go throught the tutorials on the three main parts of web components
* [Custom Elements](
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
* [Shadow DOM](
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM)
* [HTML Templates](
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)
Here's collection of web component code examples from MDN:
* [Web Components: from zero to hero](
https://dev.to/thepassle/web-components-from-zero-to-hero-4n4m)
* [web component examples](
https://github.com/mdn/web-components-examples)
Complete the following CodeLabs
Work through the following codelab to get a more hands-on understanding on the basics of Web Components.
** When you finish the codelab, customize the text of the 'cool-heading' and also it's color and then capture a snapshot of this result and upload this snapshot evidence here. * [Web Components basics - open-wc codelab](
https://open-wc.org/codelabs/basics/web-components.html?index=/codelabs/
#0)
Answer these Questions:
Provide simple answers to the following few questions * What is ::part() css pseudo-element useful for?
* What actions can be performed during the lifecycle callback: connectedCalback?
* What is the purpose of shadowDOM?
* If you want to peek/query inside the ShadowDOM using DOM api methods, which element in the ShadowDOM do you hook into?
* Can you give an example for what you'd use the <slot> tag for?
