Web Components in Action

Table of contents

1. Copyright
2. Brief Table of Contents
3. Table of Contents
4. Foreword
5. Preface
6. Acknowledgments
7. About this book
8. About the cover illustration
9. Part 1. First steps
   1. Chapter 1. The framework without a framework
      1. 1.1. What are Web Components?
      2. 1.2. The future of Web Components
      3. 1.3. Beyond the single component
      4. 1.4. Your project, your choice
      5. Summary
   2. Chapter 2. Your first Web Component
      1. 2.1. Intro to HTMLElement
      2. 2.2. Rules for naming your element
      3. 2.3. Defining your custom element (and handling collisions)
      4. 2.4. Extending HTMLElement to create custom component logic
      5. 2.5. Using your custom element in practice
      6. 2.6. Making a (useful) first component
      7. 2.7. Notes on browser support
      8. Summary
   3. Chapter 3. Making your component reusable
      1. 3.1. A real-world component
      2. 3.2. Making our component configurable
      3. 3.3. Using attributes for configuration
      4. 3.4. Listening for attribute changes
      5. 3.5. Making more things even more customizable
      6. 3.6. Updating the slider component
      7. Summary
   4. Chapter 4. The component lifecycle
      1. 4.1. The Web Components API
      2. 4.2. The connectedCallback handler
      3. 4.3. The remaining Web Component lifecycle methods
      4. 4.4. Comparing to React’s lifecycle
      5. 4.5. Comparing to a game engine lifecycle
      6. 4.6. Component lifecycle v0
      7. Summary
   5. Chapter 5. Instrumenting a better web app through modules
      1. 5.1. Using the <script> tag to load your Web Components
      2. 5.2. Using modules to solve dependency problems
      3. 5.3. Adding interactivity to our component
      4. 5.4. Wrapping third-party libraries as modules
      5. Summary
10. Part 2. Ways to improve your component workflow
    1. Chapter 6. Markup managed
       1. 6.1. String theory
       2. 6.2. Using template literals
       3. 6.3. Importing templates
       4. 6.4. Template logic
       5. 6.5. Element caching
       6. 6.6. Smart templating
       7. 6.7. Updating the slider component
       8. Summary
    2. Chapter 7. Templating your content with HTML
       1. 7.1. R.I.P. HTML Imports
       2. 7.2. The <template> tag
       3. 7.3. Choose your own template adventure
       4. 7.4. Dynamically loading templates
       5. 7.5. Entering the Shadow DOM with slots
       6. Summary
    3. Chapter 8. The Shadow DOM
       1. 8.1. Encapsulation
       2. 8.2. Enter the Shadow DOM
       3. 8.3. The Shadow DOM today
       4. Summary
    4. Chapter 9. Shadow CSS
       1. 9.1. Style creep
       2. 9.2. Style creep solved with the Shadow DOM
       3. 9.3. Shadow DOM workout plan
       4. 9.4. Adaptable components
       5. 9.5. Updating the slider component
       6. Summary
    5. Chapter 10. Shadow CSS rough edges
       1. 10.1. Contextual CSS
       2. 10.2. Component themes
       3. 10.3. Using the Shadow DOM in practice (today)
       4. Summary
11. Part 3. Putting your components together
    1. Chapter 11. A real-world UI component
       1. 11.1. Crafting a color picker
       2. 11.2. Coordinate picker component
       3. 11.3. The color picker
       4. 11.4. Adding a common design language
       5. Summary
    2. Chapter 12. Building and supporting older browsers
       1. 12.1. Backward compatibility
       2. 12.2. Building for the least common denominator
       3. 12.3. Build processes
       4. 12.4. Building components
       5. 12.5. Transpiling for IE
       6. Summary
    3. Chapter 13. Component testing
       1. 13.1. Unit testing and TDD
       2. 13.2. Web Component tester
       3. 13.3. Comparing to a standard test setup with Karma
       4. Summary
    4. Chapter 14. Events and application data flow
       1. 14.1. Framework offerings
       2. 14.2. Events
       3. 14.3. Passing events through Web Components
       4. 14.4. Separate your data
       5. 14.5. Exercise playback view
       6. 14.6. Passing events with an event bus
       7. Summary
    5. Chapter 15. Hiding your complexities
       1. 15.1. Looking to the Web Component future
       2. 15.2. 3D and mixed reality
       3. 15.3. Video effects
       4. 15.4. Hand tracking and machine learning
       5. Summary
12. Appendix. ES2015 for Web Components
    1. A.1. What is ES2015?
    2. A.2. Rethinking variables with ES2015
    3. A.3. Classes
    4. A.4. Modules
    5. A.5. Template literals
    6. A.6. The fat arrow
13. Index
14. List of Figures
15. List of Tables
16. List of Listings