Introduction to Web Components

Duration

2 days

Description

Embark on a transformative journey into modern web development with our "Introduction to Web Components" course. Discover the fundamental concept of Web Components and their pivotal role in addressing complex web development challenges, equipping you to create cutting-edge web solutions. Gain proficiency in essential web development languages, including HTML, CSS, JavaScript, and TypeScript, providing you with a robust foundation for crafting dynamic and responsive web applications. Dive deep into the intricacies of Shadow DOM, where you'll master concepts like Shadow Host, Shadow Tree, and Shadow Root, allowing you to create encapsulated and reusable web components. Develop expertise in crafting Custom Elements, from defining and registering custom element classes to harnessing lifecycle callbacks for dynamic applications. You'll also learn the art of using Templates, including the Template Element and Slot Element, streamlining your UI development process. Finally, acquire the essential skills for unit testing in Web Components, setting up Jest and TypeScript for effective testing, ensuring the reliability and quality of your components in real-world projects. Join us in this course to become a proficient web developer with a deep understanding of Web Components, ready to tackle the most demanding web development challenges.

Objectives

Understand the concept of Web Components and their role in solving web development challenges.
Gain proficiency in essential web development languages: HTML, CSS, JavaScript, and TypeScript.
Master the use of Shadow DOM in Web Components, including concepts like Shadow Host, Shadow Tree, and Shadow Root.
Develop expertise in Web Components' Custom Elements, defining and registering custom element classes, and utilizing lifecycle callbacks.
Learn how to use Templates in Web Components, including the Template Element and Slot Element.
Acquire the skills for unit testing in Web Components, setting up Jest and TypeScript and creating effective unit test scaffolding.

Prerequisites

All attendees should have experience with modern JavaScript or TypeScript and web browser programming.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Outline

What are Web Components?
- What problem do Web Components solve?
- W3C Standards
- Custom Elements
- Shadow DOM
- HTML Template
Language Review
- HTML
  - Elements & Custom Elements
  - Attributes & Custom Attributes
  - Semantic Meaning
  - Template and Slot Elements
- CSS
  - Selectors
    - Id, Class, Element
    - Attribute
    - Pseudo-Class
    - Combinators
    - Specificity
    - Scoping Strategy
  - Layout
    - Box Model
    - FlexBox
    - Grid
  - Display & Position
  - Styling Fonts & Colors
- JavaScript
  - Classes
  - Prototype Inheritance
  - Functions
  - Types and Variables
  - Promises
- TypeScript
  - Webpack & Babel
  - Browser API Review
  - DOM Manipulation
  - Selecting Elements
  - Append/Remove/Modify Elements
  - Cloning Elements
- Http Requests
  - XmlHttpRequest Object
  - Fetch API
- Events
  - Bubbling
  - Capturing
  - Event Data
  - Registering Event Handlers
  - Triggering Events
  - Prevent Default
  - Stop Propogation
Web Components – Custom Elements
- Define a new Custom Element Class
- Register Custom Element
- Lifecycle Callbacks
  - Connected Callback
  - Disconnected Callback
  - Adopted Callback
  - Attribute Changed Callback
- Transpilers and Classes
Web Components – Shadow DOM
- Shadow Host
- Shadow Tree
- Shadow Boundary
- Shadow Root
- Attach a Shadow Root
- Applying Styles
- Browser Events
- Open vs Closed
Web Components – Template
- Template Element
- Usage with Web Components
- Slot Element
- Project Content with Slots
Web Components - Unit Testing
- Setting up Jest and TypeScript
- Unit Test Scaffolding
  - Test Suite
  - Test
  - Setup/Teardown
  - Assertions
  - Spies
  - Mocks