Web Component Essentials

Stop rewriting your UI components for every front end framework. Learn how to create reusable Web Components.


Web Component Essentials

Build and Share.

Increase your productivity by learning how to create UI components that work together with Angular, Vue, React, and more! Build robust style guides and design systems by leveraging Web Components. Full working code examples are included.

Read the ebook by Google Developer Expert Cory Rylan and learn the essentials to get started creating your own Web Components today.

Get Book Now!
Web Component Essentials Book

What's Included

Code Examples

Over 20 stand alone fully functioning code examples included alongside the book.


100+ Page Book

Learn the fundamentals using Web Component APIs all the way to shipping production components in short concise chapters.

Table of Contents

  • Introduction
    • About the Author
    • What is this Book About?
    • Technical Prerequisites
  • Chapter 1 - The Component
    • History of the Component
    • What is a Web Component?
    • Custom Elements
  • Chapter 2 - Templates
    • Attaching a Template to the Shadow DOM
    • Content Slot API
    • Named Slots
    • Use Case - Dropdown Component
  • Chapter 3 - Component Communication
    • Component Properties
    • Component Events
    • Use Case - Dropdown Component
    • Component Custom Attributes
  • Chapter 4 - Component Lifecycle
    • JavaScript Class Constructor and Connected Callback
    • Disconnected Callback
    • Attribute Changed Callback
    • Adopted Callback
  • Chapter 5 - Dynamic Styles and the Shadow DOM
    • Global Styles
    • CSS Encapsulation
    • CSS Custom Properties
    • Dynamic CSS Custom Properties
  • Chapter 6 - Theming Web Components
    • Root Scope and Host Scope
    • Implementing Dark Themes
  • Chapter 7 - Component Hierarchy and Architecture
    • Component Data Flow
    • Character List
    • Character Detail
  • Chapter 8 - Production Ready(ish) Web Components
    • Publishing with NPM
    • Browser Support
    • Polyfills
    • Installing Webpack and Babel
    • Webpack
  • Chapter 9 - Using Web Components in Angular and VueJS
    • Angular
    • VueJS
  • Chapter 10 - Using Web Components in React
    • React Compatibility
    • Create React App
    • Properties and Events
    • Prop Updates
  • Chapter 11 - lit-html templates
    • lit-html and Template Literal Strings
    • Templates and Event Listeners
    • Properties and Decorators
    • Custom Events
    • Binding to other Web Components with lit-html
  • Chapter 12 - Stencil JS
    • The Stencil CLI
    • Decorators
    • JSX Templates
    • JSX Component Bindings
    • Building your Stencil Components
  • Chapter 13 - Building a Todo App with lit-html
    • Implementation
    • Todos Data Service
    • Todos List
    • Todo Item
  • Chapter 14 - Conclusion

Get Web Component Essentials

  • 100+ Page EBook including PDF, ePub and Mobi formats.
  • 20+ Code examples with Angular, Vue and React integration.
  • Free lifetime updates to any new material that’s added.
Buy Now | $14.99 Buy for your Team | Starting at $59.99

Frequently Asked Questions


What formats are included with the book?

The EBook includes PDF, ePub and Mobi formats.


Can I get a refund if needed?

Yes, within 30 days of purchase you can get a 100% refund on any purchase.


Does the book receive updates?

Yes, the book is frequently updated to the latest best practices for Web Components. All future updates are included with purchase.

Are code examples included?

Yes, a zip file with 20+ code examples is included with purchase.


Will Web Components work in my framework/library?

Yes, Web Components will work in most modern JavaScript frameworks. The book provides detailed guides and code examples for Angular, Vue and React.

The Author

Cory Rylan is a full-time front-end web developer and Google Developer Expert in Angular and Web Technologies. He works full time building design systems and progressive web apps. When not building he is busy teaching Angular and other web technologies in workshops and conferences. He loves the web and is optimistic of the places it can take us.

Articles View All

Introduction to Web Components

Introduction to Web Components

coryrylan.com
lit-html

Building Web Components with lit-html

coryrylan.com
StencilJS

Create your first Web Component with Stencil JS

coryrylan.com

Videos