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 Web Components in Action contents foreword preface acknowledgments about this book Who should read this book How this book is organized: a roadmap About the code liveBook discussion forum About the author about the cover illustration Part 1 First steps 1 The framework without a framework 1.1 What are Web Components? 1.1.1 The date picker 1.1.2 The Shadow DOM 1.1.3 What do people mean when they say Web Components? 1.1.4 The problematic history of HTML Imports 1.1.5 Polymer Library and X-Tags 1.1.6 Modern Web Components 1.2 The future of Web Components 1.3 Beyond the single component 1.3.1 Web Components are just like any other DOM element 1.3.2 From individual component to application 1.4 Your project, your choice Summary 2 Your first Web Component 2.1 Intro to HTMLElement 2.1.1 Crash course in inheritance 2.1.2 Inheritance in your favorite elements 2.2 Rules for naming your element 2.3 Defining your custom element (and handling collisions) 2.4 Extending HTMLElement to create custom component logic 2.5 Using your custom element in practice 2.6 Making a (useful) first component 2.6.1 Setting up our web server 2.6.2 Writing our HTML tag 2.6.3 Creating our class 2.6.4 Adding content to our component 2.6.5 Styling our component 2.6.6 Component logic 2.6.7 Adding interactivity 2.6.8 Finishing touches 2.6.9 Improving the carousel 2.7 Notes on browser support Summary 3 Making your component reusable 3.1 A real-world component 3.1.1 A 3D search use case 3.1.2 Starting with an HTTP request 3.1.3 Wrapping up our work in a custom component 3.1.4 Rendering search results 3.1.5 Styling our component 3.2 Making our component configurable 3.2.1 Creating our component API with setters 3.2.2 Using our API from the outside looking in 3.3 Using attributes for configuration 3.3.1 An argument against a component API for configuration 3.3.2 Implementing attributes 3.3.3 Case sensitivity 3.4 Listening for attribute changes 3.4.1 Adding text input 3.4.2 The attribute changed callback 3.4.3 Observed attributes 3.5 Making more things even more customizable 3.5.1 Using hasAttribute to check if an attribute exists 3.5.2 Fully customizing the HTTP request URL for development 3.5.3 Best practice guides 3.5.4 Avoiding attributes for rich data 3.5.5 Property and attribute reflection 3.6 Updating the slider component Summary 4 The component lifecycle 4.1 The Web Components API 4.2 The connectedCallback handler 4.2.1 Constructor vs. connected 4.3 The remaining Web Component lifecycle methods 4.3.1 Disconnected callback 4.3.2 Adopted callback 4.4 Comparing to React’s lifecycle 4.5 Comparing to a game engine lifecycle 4.6 Component lifecycle v0 Summary 5 Instrumenting a better web app through modules 5.1 Using the tag to load your Web Components 5.1.1 Having to deal with many JS and CSS references 5.1.2 Tiny scripts are more organized, but make the reference problem worse 5.1.3 Including CSS for self-reliant components 5.1.4 Dependency hell 5.2 Using modules to solve dependency problems 5.2.1 Creating a musical instrument with Web Components and JS modules 5.2.2 Starting with the smallest component 5.2.3 Importing and nesting a Web Component within a Web Component 5.2.4 Using a Web Component to wrap an entire web application 5.3 Adding interactivity to our component 5.3.1 Listening for mouse movement 5.3.2 Passing data to child components 5.3.3 Making your components shake with CSS 5.4 Wrapping third-party libraries as modules 5.4.1 Frontend tooling for wrapping a module with Node.js 5.4.2 Not perfect, but does the job 5.4.3 Using the wrapped module to play some notes 5.4.4 No more audio autoplay 5.4.5 Playing the Web Harp Summary Part 2 Ways to improve your component workflow 6 Markup managed 6.1 String theory 6.1.1 When inline HTML gets ugly 6.1.2 String syntax with the backtick 6.2 Using template literals 6.2.1 Business card creator 6.2.2 Iterating design with just HTML and CSS 6.3 Importing templates 6.3.1 Keeping markup out of the main component logic 6.3.2 A module just for HTML and CSS 6.4 Template logic 6.4.1 Creating menus from data 6.4.2 More generation logic, harder automation 6.5 Element caching 6.5.1 Don’t make me query-select in my component 6.6 Smart templating 6.6.1 Using lit-html 6.6.2 Repeating with templates 6.6.3 Should you use it? 6.6.4 Injecting event listeners into markup 6.7 Updating the slider component Summary 7 Templating your content with HTML 7.1 R.I.P. HTML Imports 7.1.1 Polyfilling HTML Imports 7.1.2 What’s inside the import 7.2 The tag 7.2.1 Document fragments 7.2.2 Using template content 7.3 Choose your own template adventure 7.4 Dynamically loading templates 7.5 Entering the Shadow DOM with slots 7.5.1 Slots without a name Summary 8 The Shadow DOM 8.1 Encapsulation 8.1.1 Protecting your component’s API 8.1.2 Protecting your component’s DOM 8.2 Enter the Shadow DOM 8.2.1 The shadow root 8.2.2 Closed mode 8.2.3 Your component’s constructor vs. connectedCallback 8.3 The Shadow DOM today Summary 9 Shadow CSS 9.1 Style creep 9.1.1 Style creep into component descendants 9.1.2 Style creep into your component 9.2 Style creep solved with the Shadow DOM 9.2.1 When styles creep 9.3 Shadow DOM workout plan 9.3.1 Application shell 9.3.2 Host and ID selectors 9.3.3 Grid and list containers 9.4 Adaptable components 9.4.1 Creating the exercise component 9.4.2 Exercise component style 9.5 Updating the slider component Summary 10 Shadow CSS rough edges 10.1 Contextual CSS 10.1.1 A small bit of interactivity 10.1.2 Contextual style 10.1.3 Workaround for host-context 10.2 Component themes 10.2.1 Shadow and deep selectors 10.2.2 CSS Variables 10.2.3 Applying CSS Variables to our demo 10.3 Using the Shadow DOM in practice (today) 10.3.1 Browser support 10.3.2 Polyfilling 10.3.3 Design systems Summary Part 3 Putting your components together 11 A real-world UI component 11.1 Crafting a color picker 11.1.1 The components of our component 11.2 Coordinate picker component 11.2.1 The coordinate picker Web Component class 11.2.2 Coordinate picker HTML/CSS 11.2.3 Component demos 11.3 The color picker 11.3.1 Observing attribute changes for interaction 11.3.2 Responding to input fields 11.3.3 Responding to attribute changes 11.4 Adding a common design language 11.4.1 Swapping in CSS vars for a consistent design 11.4.2 Using imports for more complex CSS Summary 12 Building and supporting older browsers 12.1 Backward compatibility 12.1.1 Toggling the Shadow DOM 12.1.2 Comparing to polyfills 12.1.3 Shadow CSS and child elements 12.2 Building for the least common denominator 12.3 Build processes 12.3.1 Using NPM scripts 12.4 Building components 12.4.1 Why we build 12.4.2 Module bundling with Rollup 12.4.3 Running builds with npm 12.5 Transpiling for IE 12.5.1 Babel 12.5.2 CSS vars ponyfill Summary 13 Component testing 13.1 Unit testing and TDD 13.2 Web Component tester 13.2.1 Writing tests 13.3 Comparing to a standard test setup with Karma 13.3.1 Karma Web Components 13.3.2 Multiple tests in the same project 13.3.3 A note on Safari Summary 14 Events and application data flow 14.1 Framework offerings 14.2 Events 14.2.1 Native events and WebComponentsReady 14.2.2 When custom elements are defined 14.2.3 Custom Events 14.2.4 Custom Event bubbling 14.3 Passing events through Web Components 14.3.1 Native event propagation through the Shadow DOM 14.3.2 Custom Event propagation through the Shadow DOM 14.4 Separate your data 14.4.1 Model-view-controller 14.4.2 Local storage 14.4.3 Wiring UI to the data model 14.5 Exercise playback view 14.6 Passing events with an event bus 14.6.1 Static getter event types 14.6.2 Design patterns as suggestions Summary 15 Hiding your complexities 15.1 Looking to the Web Component future 15.2 3D and mixed reality 15.2.1 A-Frame 15.2.2 Model-viewer component 15.2.3 model-viewer + Poly search 15.2.4 AR with model-viewer 15.2.5 Your own 3D component 15.3 Video effects 15.3.1 Processing pixels with JS 15.3.2 WebGL shaders 15.4 Hand tracking and machine learning Summary appendix ES2015 for Web Components A.1 What is ES2015? A.2 Rethinking variables with ES2015 A.2.1 Variable declaration with let A.2.2 Variable declaration with const A.2.3 Important by convention but not functionality A.3 Classes A.3.1 Constructor A.3.2 Properties A.3.3 Private properties in JS A.3.4 Getters and setters A.3.5 Static methods A.4 Modules A.4.1 Top-level objects in JS A.4.2 Module syntax for importing and exporting A.4.3 Working with multiple functions in the same module A.5 Template literals A.5.1 Inserting variables into a template literal A.6 The fat arrow A.6.1 The callback scope problem A.6.2 Losing scope in classes A.6.3 Managing scope with the fat arrow index Numerics A B C D E F G H I J K L M N O P Q R S T U V W X Y 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.