Developing Web Components

In the course Developing Web Components from SpiralTrain, participants learn to use web platform APIs to create new self-defined Web Components with their own HTML tag, encapsulated styles and their o

Introduction to Web Components

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.

Custom Elements

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.

ES Modules

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.

Shadow DOM

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.

HTML Templates

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.

Advanced Web Components

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.

Audience Course Developing Web Components

The course Developing Web Components is intended for Web Developers who want to learn how Web Components can be applied in modern web applications.

Prerequisites Course Developing Web Components

To participate in this course, good knowledge of the basics of Web Applications with HTML and CSS and knowledge of JavaScript is required.

Realization Training Web Components

The theory is explained with slides and demos. The course has a hands-on character. Explanations are interchanged with exercises.

Certificate Course Web Components

After successfully completing the course, attendants will receive a certificate of participation in Web Components.

Modules

Module 1 : Intro Web Components

• 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

Module 2 : Custom Elements

• 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

Module 3 : ES Modules

• 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

• 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

Module 5 : HTML Templates

• 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

Module 6 : Advanced Web Components

• 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