Learning Web Components

Learn how to use web components to simplify developing and maintaining web applications. Discover how to customize HTML templates, HTML imports, built-in elements, and Shadow DOM.

Introduction

• Welcome
• What you should know
• Exercise files

1. Overview of Web Components

• What are Web Components?
• The Web Component standards

2. HTML Templates

• Overview of HTML templates
• Declare template content
• Activate and use templates

3. HTML Imports

• Overview of HTML imports
• Use HTML imports
• Create reusable modules

4. Custom Elements

• Overview of custom elements
• Define custom elements
• Custom elements and styling
• Custom element properties and attributes

5. Shadow DOM

• Introduction to Shadow DOM
• Create Shadow DOM
• Composition and content
• Shadow DOM from templates
• Styling and Shadow DOM
• A finished Web Component

Conclusion

• Next steps