Web Components in Action

SummaryWeb Components are a standardized way to build reusable custom elements for web pages and applications using HTML, CSS, and JavaScript. A Web Component is well-encapsulated, keeping its internal structure separate from other page elements so they don't collide with the rest of your code. In Web Components in Action you'll learn to design, build, and deploy reusable Web Components from scratch.Foreword by Gray Norton.Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.About the TechnologyThe right UI can set your sites and web applications apart from the ordinary. Using the Web Components API, you can build Custom Elements and then add them to your pages with just a simple HTML tag. This standards-based design approach gives you complete control over the style and behavior of your components and makes them radically easier to build, share, and reuse between projects.About the BookWeb Components in Action teaches you to build and use Web Components from the ground up. You'll start with simple components and component-based applications, using JavaScript, HTML, and CSS. Then, you'll customize them and apply best design practices to maximize reusability. Through hands-on projects, you'll learn to build production-ready Web Components for any project, including color pickers, advanced applications using 3D models, mixed reality, and machine learning.What's insideCreating reusable Custom Elements without a frameworkUsing the Shadow DOM for ultimate component encapsulationLeveraging newer JS features to organize and reuse codeFallback strategies for using Web Components on older browsersAbout the ReaderWritten for web developers experienced with HTML, CSS, and JavaScript.About the AuthorBen Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team.Table of ContentsPART 1 - FIRST STEPSThe framework without a framework Your first Web Component Making your component reuseable The component lifecycle Instrumenting a better web app through modules PART 2 - WAYS TO IMPROVE YOUR COMPONENT WORKFLOW Markup Managed Templating your content with HTML The Shadow DOM Shadow CSS Shadow CSS rough edges PART 3 - PUTTING YOUR COMPONENTS TOGETHERA real-world UI component Building and supporting older browsers Component testing Events and application data flow Hiding your complexities Copyright......Page 3 Brief Table of Contents......Page 6 Table of Contents......Page 8 Foreword......Page 23 Preface......Page 27 Acknowledgments......Page 31 About this book......Page 33 About the cover illustration......Page 41 Part 1. First steps......Page 42 Chapter 1. The framework without a framework......Page 43 1.1. What are Web Components?......Page 48 1.2. The future of Web Components......Page 61 1.3. Beyond the single component......Page 64 1.4. Your project, your choice......Page 72 Summary......Page 74 Chapter 2. Your first Web Component......Page 75 2.1. Intro to HTMLElement......Page 76 2.2. Rules for naming your element......Page 82 2.3. Defining your custom element (and handling collisions)......Page 85 2.4. Extending HTMLElement to create custom component logic......Page 88 2.5. Using your custom element in practice......Page 96 2.6. Making a (useful) first component......Page 101 2.7. Notes on browser support......Page 125 Summary......Page 127 Chapter 3. Making your component reusable......Page 128 3.1. A real-world component......Page 129 3.2. Making our component configurable......Page 143 3.3. Using attributes for configuration......Page 148 3.4. Listening for attribute changes......Page 153 3.5. Making more things even more customizable......Page 162 3.6. Updating the slider component......Page 172 Summary......Page 181 Chapter 4. The component lifecycle......Page 182 4.1. The Web Components API......Page 183 4.2. The connectedCallback handler......Page 185 4.3. The remaining Web Component lifecycle methods......Page 198 4.4. Comparing to React’s lifecycle......Page 204 4.5. Comparing to a game engine lifecycle......Page 208 4.6. Component lifecycle v0......Page 219 Summary......Page 221 Chapter 5. Instrumenting a better web app through modules......Page 222 5.1. Using the tag to load your Web Components......Page 223 5.2. Using modules to solve dependency problems......Page 233 5.3. Adding interactivity to our component......Page 247 5.4. Wrapping third-party libraries as modules......Page 256 Summary......Page 264 Part 2. Ways to improve your component workflow......Page 265 Chapter 6. Markup managed......Page 267 6.1. String theory......Page 268 6.2. Using template literals......Page 272 6.3. Importing templates......Page 278 6.4. Template logic......Page 285 6.5. Element caching......Page 290 6.6. Smart templating......Page 295 6.7. Updating the slider component......Page 305 Summary......Page 311 Chapter 7. Templating your content with HTML......Page 312 7.1. R.I.P. HTML Imports......Page 313 7.2. The tag......Page 321 7.3. Choose your own template adventure......Page 330 7.4. Dynamically loading templates......Page 337 7.5. Entering the Shadow DOM with slots......Page 345 Summary......Page 352 Chapter 8. The Shadow DOM......Page 353 8.1. Encapsulation......Page 356 8.2. Enter the Shadow DOM......Page 364 8.3. The Shadow DOM today......Page 376 Summary......Page 380 Chapter 9. Shadow CSS......Page 381 9.1. Style creep......Page 382 9.2. Style creep solved with the Shadow DOM......Page 392 9.3. Shadow DOM workout plan......Page 401 9.4. Adaptable components......Page 416 9.5. Updating the slider component......Page 426 Summary......Page 430 Chapter 10. Shadow CSS rough edges......Page 431 10.1. Contextual CSS......Page 432 10.2. Component themes......Page 450 10.3. Using the Shadow DOM in practice (today)......Page 461 Summary......Page 468 Part 3. Putting your components together......Page 469 Chapter 11. A real-world UI component......Page 470 11.1. Crafting a color picker......Page 472 11.2. Coordinate picker component......Page 481 11.3. The color picker......Page 494 11.4. Adding a common design language......Page 511 Summary......Page 527 Chapter 12. Building and supporting older browsers......Page 528 12.1. Backward compatibility......Page 531 12.2. Building for the least common denominator......Page 546 12.3. Build processes......Page 550 12.4. Building components......Page 555 12.5. Transpiling for IE......Page 573 Summary......Page 584 Chapter 13. Component testing......Page 585 13.1. Unit testing and TDD......Page 586 13.2. Web Component tester......Page 589 13.3. Comparing to a standard test setup with Karma......Page 602 Summary......Page 620 Chapter 14. Events and application data flow......Page 621 14.1. Framework offerings......Page 622 14.2. Events......Page 625 14.3. Passing events through Web Components......Page 636 14.4. Separate your data......Page 644 14.5. Exercise playback view......Page 661 14.6. Passing events with an event bus......Page 668 Summary......Page 676 Chapter 15. Hiding your complexities......Page 677 15.1. Looking to the Web Component future......Page 679 15.2. 3D and mixed reality......Page 684 15.3. Video effects......Page 723 15.4. Hand tracking and machine learning......Page 735 Summary......Page 745 Appendix. ES2015 for Web Components......Page 746 A.1. What is ES2015?......Page 747 A.2. Rethinking variables with ES2015......Page 749 A.3. Classes......Page 755 A.4. Modules......Page 772 A.5. Template literals......Page 779 A.6. The fat arrow......Page 781 Index......Page 790 List of Figures......Page 827 List of Tables......Page 842 List of Listings......Page 843 Web components are a set of web platform APIs that allow you to create reusable modular HTML tags for your web apps and pages. With web components, you can easily make your own share buttons, date pickers, and more in a way that makes it easy to customize.