Summary Web 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 Technology The 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 Book Web 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 inside Creating reusable Custom Elements without a framework - Using the Shadow DOM for ultimate component encapsulation - Leveraging newer JS features to organize and reuse code - Fallback strategies for using Web Components on older browsers About the Reader Written for web developers experienced with HTML, CSS, and JavaScript. About the Author Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team. Table of Contents PART 1 - FIRST STEPS - The 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 TOGETHER - A real-world UI component - Building and supporting older browsers - Component testing - Events and application data flow - Hiding your complexities "Teaches by example, demonstrating concepts through compelling projects that illuminate realistic use cases." - From the Foreword by Gray Norton, Polymer Project, Google "Informative, full of resources and comprehensive examples. Definitely one of the best books I've read about web technology this year." - Russel Dawn Cajoles, BlaqClouds "A solid resource for frontend developers experiencing JavaScript framework fatigue." - Matt Welke, GroupBy "Well-paced and thorough. Highly recommended." - Justin Calleja, Mr Green Ben Farrell is a Senior Experience Developer at Adobe working on the Adobe Design Prototyping Team. Ben, alongside his team, helps shape and realize the UX of products and features in the middleground between design and engineering. Ben has been primarily web focused his entire career, but has worked on award winning projects using a wide variety of platforms and languages.