Web Component Essentials
Web Component Essentials
Minimum price
Suggested price
Web Component Essentials

This book is 100% complete

Completed on 2018-10-28

About the Book

This books goal 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 share your 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 still in progress. 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. @vintagesoftware developer. 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
    • 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 - Component Styles and Themes
    • Global Styles
    • CSS Encapsulation
    • CSS Custom Properties
    • Dynamic CSS Custom Properties
    • Theming Web Components
  • Chapter 6 - Component Hierarchy and Architecture
    • Component Data Flow
    • Character List
    • Character Detail
  • Chapter 7 - Production Ready(ish) Web Components
    • Publishing with NPM
    • Browser Support
    • Polyfills
    • Installing Webpack and Babel
    • Webpack
  • Chapter 8 - Using Web Components in Angular and VueJS
    • Angular
    • VueJS
  • Chapter 9 - Using Web Components in React
    • React Compatibility
    • Create React App
    • Properties and Events
    • Prop Updates
  • Chapter 10 - 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 11 - Stencil JS
    • The Stencil CLI
    • Decorators
    • JSX Templates
    • JSX Component Bindings
    • Building your Stencil Components
  • Chapter 12 - Building a Todo App with lit-html
    • Implementation
    • Todos Data Service
    • Todos List
    • Todo Item
  • Chapter 13 - Conclusion

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...

Write and Publish on Leanpub

Authors, publishers and universities use Leanpub to publish amazing in-progress and completed books and courses, just like this one. You can use Leanpub to write, publish and sell your book or course as well! 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