Web Component Essentials
Web Component Essentials
$14.99
Minimum price
$19.99
Suggested price
Web Component Essentials

This book is 100% complete

Completed on 2019-07-25

About the Book

The goal of this book is to provide a practical introduction to Web Components and what value they can provide for your team. We will cover the various APIs used to create Web Components and then build our own. We will also look at advanced tooling to provide more natural ways to create Web Components while still keeping the compatibility and re-usability of Web Components. Learn how to build design systems and share UI components between different JavaScript frameworks/libraries such as Angular, Vue and React. By the end of this book, you will know to build your own suite of UI components and deploy them anywhere in any web development stack. webcomponentessentials.com

This book is continually updated. Currently, the basics of the Web Component APIs have been covered. Upcoming chapters will dive into topics such as advanced component authoring tools and JavaScript framework compatibility. 

  • Share this book

About the Author

Cory Rylan
Cory Rylan

Software Developer. @google Developer Expert for @angular and web technologies. @angularbootcamp instructor. @VMware Senior UI Engineer. Read more at coryrylan.com

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

Authors have earned$8,182,613writing, publishing and selling on Leanpub,
earning 80% royalties while saving up to 25 million pounds of CO2 and up to 46,000 trees.

Learn more about writing on Leanpub

The Leanpub 45-day 100% Happiness Guarantee

Within 45 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms

Free Updates. Free App. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers), EPUB (for phones and tablets), MOBI (for Kindle) and in the free Leanpub App (for Mac, Windows, iOS and Android). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses! Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks. Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. It really is that easy.

Learn more about writing on Leanpub