-
Learning by doing
-
Trainers with practical experience
-
Classroom training
-
Detailed course material
-
Clear content description
-
Tailormade content possible
-
Training that proceeds
-
Small groups
In the course Developing Web Components, participants learn to use web platform APIs to create new self-defined Web Components with their own HTML tag, encapsulated styles and their own behavior. The participants learn to work with Custom Elements, Shadow DOM and HTML Templates.
The course Developing Web Components starts with an overview of Web Components and the benefits they offer in terms of encapsulation, reusability and interoperability. Participants will gain a foundational understanding of the key concepts and technologies that underpin Web Components, like Custom Elements, the Shadow DOM and HTML Templates.
Next attention is paid how Custom Elements can be defined and used. Topics include Custom Element lifecycle, properties, attributes, and events, as well as best practices for creating and extending Custom Elements.
Also ES Modules are covered which enable modular code organization and dependency management in JavaScript development. Subjects are how to create, import, and export ES Modules, and how to structure projects using this powerful module system.
The Shadow DOM is discussed as well and it is explained how to encapsulate styling and markup within Web Components, ensuring isolation and preventing style leakage. Attention is paid to creating Shadow Roots, styling Shadow DOM content and using slots for content projection.
Part of the subject matter of the course Developing Web Components are also HTML Templates which form a mechanism for defining reusable markup structures. It is explained how HTML Templates allow encapsulating and instantiating complex HTML structures, enabling flexible and efficient component composition in Web applications.
Finally advanced techniques and patterns for developing Web Components are treated. Here composition and communication between Web Components, integrating Web Components in Microservices Architectures and optimizing performance and accessibility are covered.
The course Developing Web Components is intended for Web Developers who want to learn how Web Components can be applied in modern web applications.
To participate in this course, good knowledge of the basics of Web Applications with HTML and CSS and knowledge of JavaScript is required.
The theory is explained with slides and demos. The course has a hands-on character. Explanations are interchanged with exercises.
After successfully completing the course, attendants will receive a certificate of participation in Web Components.
Module 1 : Intro Web Components |
Module 2 : Custom Elements |
Module 3 : ES Modules |
|
What are Web Components? Benefits of Web Components Web Component Specifications Custom Elements Shadow DOM Style Encapsulation ES Modules HTML Templates Browser Support Environment Setup Create First Web Component |
Intro Custom Elements Defining Custom Elements Lifecycle Hooks Attributes and Properties Event Handling Extending Built-in Elements Naming Conventions JavaScript Libraries Platform API's Polyfills Browser Compatibility |
ECMA Standard Module Systems CommonJS Modules Asynchronous Module Definition Internal Modules External Modules Imports and Exports Module Scopes Module Instantiation Dependency Graphs WebAssembly Integration |
Module 4 : Shadom DOM |
Module 5 : HTML Templates |
Module 6 : Advanced Web Components |
|
What is Shadow DOM? Encapsulation Creating Shadow Roots Styling Shadow DOM Content Scoped CSS Variables Shadow DOM Slots Shadow DOM Events Manipulating Shadow DOM Content CSS Encapsulation CSS Inheritance Debugging Shadow DOM |
What are HTML Templates? Creating HTML Templates Content Insertion Markup Fragments Template Cloning Template Instantiation Parameterized Templates Dynamic Templates Template Accessibility Templating Engines Template Libraries |
Composing Web Components Component Interaction Custom Events Shadow DOM Composition Slot Receptacles Named Slots Conditional Rendering Internationalization Single Page Applications Microservices Architecture Responsive Web Components |
These companies already made use of our courses:
These companies used our courses:
