Web Component Essentials
An introduction to creating reusable user interfaces with Web Components. Full working code examples included!
Learn the essentials to get started creating Web Components. Stop rewriting your UI for every front end technology. Increase productivity by learning how to create UI components that work together with Angular, Vue, React and more!
Authored by Google Developer Expert, Cory Rylan.
Free lifetime updates of the book and code examples included!
Minimum price
$14.99
$19.99
You pay
$19.99Author earns
$15.99About
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.
Author
About the Author
Cory Rylan
My name is Cory Rylan, Google Developer Expert, Speaker, Software Developer. Building Design Systems and Web Components.
Contents
Table of Contents
Introduction
- About the Author
- What is this Book About?
- Technical Prerequisites
- Source Code Examples
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 - Styling with CSS and the Shadow DOM
- Global Styles
- CSS Encapsulation
- CSS Custom Properties
- Dynamic CSS Custom Properties
- Using :host and CSS Custom Properties
- CSS Parts API
- Styling Slotted Elements
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
- Lit and Template Literal Strings
- Templates and Event Listeners
- Properties and Decorators
- Custom Events
- Binding to other Web Components with Lit
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
- Implementation
- Todos Data Service
- Todos List
- Todo Item
Chapter 14 - Unit Testing Basics
- Setting up the Test Runner
- Unit Test Structure
- First Unit Test
Chapter 15 - Conclusion
Chapter 16 - Code Examples
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
Earn $8 on a $10 Purchase, and $16 on a $20 Purchase
We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. 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) and EPUB (for phones, tablets and Kindle). 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. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.