Web Component Essentials
Web Component Essentials
An introduction to creating reusable user interfaces with Web Components. Full working code examples included!
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.
About the Author
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...
80% Royalties. Earn $16 on a $20 book.
We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $13 millionwriting, 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
