Web Components Training Overview
This Introduction to Web Components training course teaches participants how to use web components to create robust, modern web solutions that seamlessly integrate with their existing web development workflow. This course also covers HTML, CSS, JavaScript, TypeScript, the Shadow DOM, custom elements, templates, and unit testing.
Location and Pricing
Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.
In addition, some courses are available as live, instructor-led training from one of our partners.
Objectives
- Understand the concept of Web Components and their role in solving web development challenges
- Work with fundamental web development languages, including HTML, CSS, JavaScript, and TypeScript
- Use Shadow DOM in web components, shadow host, shadow tree, and shadow root
- Work with custom elements
- Define and register custom element classes
- Implement lifecycle callbacks
- Use templates in web components, including the template element and slot element
- Understand unit testing in web components, set up Jest and TypeScript, and create effective unit test scaffolding
Prerequisites
Attendees must have experience with modern JavaScript or TypeScript and web browser programming.
Outline
Expand All | Collapse All
Introduction
What are Web Components?
- What problems do Web Components solve?
- W3C Standards
- Custom Elements
- Shadow DOM
- HTML Template
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
- 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 Propagation
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
Conclusion
Training Materials
All students receive comprehensive courseware covering all topics in the course.
Software Requirements
- A free, personal GitHub account to access the courseware
- Node.js and Visual Studio Code
- NPM Packages and Visual Studio Extensions
- If students cannot configure a local environment, a cloud-based environment can be provided
