List of Listings

Chapter 2. Your first Web Component

Listing 2.1. Giving our custom tag some custom logic

Listing 2.2. Query-selecting inner components and setting their style

Listing 2.3. A complete but simple Web Component example

Listing 2.4. Trading inline styles for CSS

Listing 2.5. A simple web page to test our server

Listing 2.6. Our photo carousel component used on a web page

Listing 2.7. Adding a script block with a class to define our component

Listing 2.8. Setting the HTML contents of our component

Listing 2.9. Adding some CSS to style our component

Listing 2.10. Adding a showPhoto method

Listing 2.11. Adding CSS to allow the current image to display correctly

Listing 2.12. Adding click listeners to our buttons

Listing 2.13. Handling our click event listeners

Listing 2.14. Adding button styles

Listing 2.15. Demo code recap

Chapter 3. Making your component reusable

Listing 3.1. Creating an HTTP request to Google’s Poly service

Listing 3.2. Creating a Web Component from our HTTP request

Listing 3.3. Render results of the HTTP request in our component

Listing 3.4. Alternate way to render results

Listing 3.5. CSS to style our poly-search component

Listing 3.6. Our entire working Web Component, fully styled

Listing 3.7. Getters and setters for our component’s configurable options

Listing 3.8. Wrapping the search method with an if statement

Listing 3.9. Using attributes for configurable options in our search method

Listing 3.10. Our complete (minus styling) component example using attributes

Listing 3.11. Text input for our component

Listing 3.12. AttributeChangedCallback to listen for changes to our searchterm

Listing 3.13. Telling our component what attributes to watch changes for

Listing 3.14. Complete component with attributes that respond to a text input field

Listing 3.15. Adding attributes for size and background color

Listing 3.16. Rendering our thumbnails with configurable sizes

Listing 3.17. Breaking apart our HTTP request URL to be even more configurable

Listing 3.18. Adding the baseuri attribute to the component tag

Listing 3.19. A pitfall for reflection from Google’s Web Components best practices guide

Listing 3.20. Adding a getter/setter in addition to existing attributes for reflection

Listing 3.21. Slider component (without CSS)

Listing 3.22. Listening for attribute changes

Listing 3.23. Getters and setters for the backgroundcolor and value properties

Listing 3.24. Functions to set the background color and slider value

Listing 3.25. Adding three event listeners to handle mouse move, up, and down

Listing 3.26. Function to handle events and a function to update the slider percentage

Chapter 4. The component lifecycle

Listing 4.1. Testing when our connectedCallback is called

Listing 4.2. Alerting from both our constructor and our connectedCallback

Listing 4.3. Trying (and failing) to set innerHTML from the constructor

Listing 4.4. Attempting to access attributes on the constructor vs. connectedCallback

Listing 4.5. A nicely formatted property list in a constructor

Listing 4.6. A demonstration of code running after the element has been removed

Listing 4.7. Using disconnectedCallback to clean up a timer

Listing 4.8. A countdown timer component

Listing 4.9. Swapping setInterval for requestAnimationFrame

Listing 4.10. Creating an inheritable base for components to update every frame

Listing 4.11. Simpler example with just one overridable update

Listing 4.12. Using the simpler base class

Chapter 5. Instrumenting a better web app through modules

Listing 5.1. Example of loading Web Components with the <script> tag

Listing 5.2. Example of index.html for development

Listing 5.3. Adding CSS to our component’s innerHTML

Listing 5.4. Reducing dependencies with no more CSS references

Listing 5.5. A minimal application HTML file for our Web Harp demo

Listing 5.6. A Web Component that defines an individual string for our instrument

Listing 5.7. A Web Component that contains multiple Web Harp strings

Listing 5.8. The Web Harp application Web Component

Listing 5.9. The Web Harp HTML file so far

Listing 5.10. Simple CSS for basic body and application style

Listing 5.11. Adding an event listener with the fat arrow

Listing 5.12. Sending points to the Web Harp strings component

Listing 5.13. Adding CSShake classes to shake our strings when strummed

Listing 5.14. Initializing MIDI.js, preparing to play piano notes

Listing 5.15. Adding note playback from the strum function

Listing 5.16. Clickthrough covering the page to address Chrome’s autoplay feature

Listing 5.17. New CSS to style and overlay the clickthrough

Chapter 6. Markup managed

Listing 6.1. Sample input form markup in a JS string

Listing 6.2. An alternate way of doing multiline strings

Listing 6.3. Using the backtick to enclose HTML strings

Listing 6.4. Markup for business card with inline expressions

Listing 6.5. Style for the business card

Listing 6.6. New page to host our business card component

Listing 6.7. Business card customizer component

Listing 6.8. Defining our template module

Listing 6.9. Passing menu options to the template

Listing 6.10. Calling out to a function-based expression to render our menus

Listing 6.11. Function to convert an array of choices to menu options

Listing 6.12. Adding event listeners to react to drop-down changes

Listing 6.13. On logo/background changes, re-renders both

Listing 6.14. Query-selecting once and saving the references for later use

Listing 6.15. Keeping query selection out of the component controller logic

Listing 6.16. Using lit-html to repeat HTML for a menu

Listing 6.17. Removing event listeners in our component to prep for lit-html

Listing 6.18. Injecting event listeners into markup using lit-html

Listing 6.19. Slider component’s template module

Listing 6.20. Slider demo page

Listing 6.21. Slider module (slider.js)

Chapter 7. Templating your content with HTML

Listing 7.1. Using HTML Imports from a sample project

Listing 7.2. Contents of an HTML Imports-based Web Component

Listing 7.3. Populating Web Component markup from an HTML Import template

Listing 7.4. Using a document fragment

Listing 7.5. Adding a few templates to a page

Listing 7.6. Cloning multiple times to add to our page

Listing 7.7. Simplified business card example using templates to drive HTML and CSS

Listing 7.8. Setting the layout attribute from a menu outside of our component

Listing 7.9. HTML page including a business card template

Listing 7.10. Loading templates with a network request

Listing 7.11. Calling a method to fill in our card layout

Listing 7.12. Contents of the populateCard function

Listing 7.13. With templates removed, our index.html is once again manageable.

Listing 7.14. Placing slot tags in our template to allow content replacement

Listing 7.15. Altering the createdCallback to use the Shadow DOM

Listing 7.16. Populating slots with values inside the component tag

Listing 7.17. Using generic, unnamed slots

Chapter 8. The Shadow DOM

Listing 8.1. A bare-bones, sample component

Listing 8.2. Using the Shadow DOM in a simple component

Listing 8.3. Setting the shadow mode to closed

Listing 8.4. Using a variable to reference the shadow root

Listing 8.5. Locally scoped shadow root variable

Listing 8.6. A public property containing the shadow root

Listing 8.7. Using the constructor instead of connectedCallback

Listing 8.8. Component with polyfill

Chapter 9. Shadow CSS

Listing 9.1. A stepper component without logic, just style

Listing 9.2. A styled button coexisting on our page with a Web Component

Listing 9.3. Using the Shadow DOM to protect our stepper component’s style

Listing 9.4. Text rules affecting inside the Shadow DOM

Listing 9.5. Resetting the style in the Shadow DOM

Listing 9.6. The index.html for our demo application

Listing 9.7. The main.css for our demo application

Listing 9.8. The main application component for our demo application

Listing 9.9. Application template module that defines our HTML and CSS

Listing 9.10. Workout plan component files

Listing 9.11. Exercise library component files

Listing 9.12. Component files for the exercise component

Listing 9.13. First pass of the exercise component

Listing 9.14. Slider component constructor

Listing 9.15. New slider template module

Chapter 10. Shadow CSS rough edges

Listing 10.1. Adding a click listener to allow exercise selection

Listing 10.2. Adding new exercises to the workout plan component (template module)

Listing 10.3. Adding new exercises to the workout plan component (component module)

Listing 10.4. Adding more functionality to the exercise component for the plan view

Listing 10.5. Contextual style in the exercise component’s CSS

Listing 10.6. Adding context via class name

Listing 10.7. Adding a different context to the workout plan

Listing 10.8. Changing host-context selectors to host

Listing 10.9. Using CSS Variables

Listing 10.10. Using CSS Variables in a Web Component’s Shadow DOM

Listing 10.11. Loading a font with our index.html

Listing 10.12. Defining global variables in CSS for text color and size

Listing 10.13. Allowing light theming in the Workout Creator demo with CSS Variables

Listing 10.14. More light theming with CSS Variables in the the workout plan component

Listing 10.15. Changing variables to switch to a green theme

Chapter 11. A real-world UI component

Listing 11.1. Coordinate picker API

Listing 11.2. Constructor and mouse event handler

Listing 11.3. Updating the x and y attributes and the position of the thumbnail

Listing 11.4. Template.js for the coordinate picker component

Listing 11.4. Template.js for coordinate picker component (continued)

Listing 11.5. Coordinate picker demo page

Listing 11.6. Component definition for the color picker

Listing 11.7. HTML for the color picker component

Listing 11.7. HTML for the color picker component (continued)

Listing 11.8. CSS for the color picker

Listing 11.8. CSS for the color picker (continued)

Listing 11.9. Important elements to cache and return references used for interaction

Listing 11.10. Listening to attribute changes with a MutationObserver

Listing 11.11. Listening for change events inside the component’s Shadow DOM

Listing 11.12. Implementing the API for our component

Listing 11.13. Setting color and transparency at the start if not defined

Listing 11.14. A color picker demo that can affect elements on the page

Listing 11.15. CSS vars to use throughout a hypothetical app and our components

Listing 11.16. Replacing values with CSS vars in the slider component

Listing 11.17. Replacing values with CSS vars in the coordinate picker component

Listing 11.18. Replacing values with CSS vars in the color picker component

Listing 11.19. Universal text rules in designsystem/text.js

Listing 11.20. A module containing rules for input fields

Listing 11.21. Modal CSS module

Listing 11.22. Adding CSS style rules for a modal

Chapter 12. Building and supporting older browsers

Listing 12.1. Slider component before allowing Shadow DOM toggling

Listing 12.2. Enabling a Shadow DOM toggle

Listing 12.3. Changing ID references to classes

Listing 12.4. Switching between Shadow DOM and non-Shadow DOM selectors

Listing 12.5. Handling a special case of class on component

Listing 12.6. Fixing a linear gradient style rule for Edge

Listing 12.7. A simple package.json script

Listing 12.8. A package.json file after installing Rollup

Listing 12.9. Adding a Rollup script in package.json

Listing 12.10. Scripts to run each component build

Listing 12.11. The latest package.json including Babel dependencies

Listing 12.12. A Babel transpile step for each component

Listing 12.13. Current package.json with Rollup bundling and Babel transpilation

Listing 12.14. Adding the CSS vars ponyfill to allow existing CSS vars to work in IE

Chapter 13. Component testing

Listing 13.1. Adding WCT testing to our project’s package.json

Listing 13.2. WCT test file setup

Listing 13.3. A start to a test suite for the slider component

Listing 13.4. A single slider test

Listing 13.5. Slider component test suite

Listing 13.6. Failing slider tests because max and min values aren’t yet implemented

Listing 13.7. Initial Karma config (condensed by removing blank lines and comments)

Listing 13.8. Rollup plugin configuration in Karma

Listing 13.9. A JS-only test file created in the test folder for each component

Listing 13.10. Final Karma configuration

Listing 13.11. HTML test file for use by the karma-web-components plugin

Listing 13.12. File-serving Karma configuration to use karma-web-components

Chapter 14. Events and application data flow

Listing 14.1. WebComponentsReady event

Listing 14.2. Using a promise to detect when a specific component is defined

Listing 14.3. Custom Event creation, dispatching, and listening

Listing 14.4. Custom Event bubbling

Listing 14.5. Web Component example with a click listener on the containing document

Listing 14.6. Web Component with Shadow DOM and a click listener on the document

Listing 14.7. Passing a Custom Event through the Shadow DOM

Listing 14.8. Exercise library component

Listing 14.9. Data model for the exercise library

Listing 14.10. Central data model for workout plan

Listing 14.10. Central data model for workout plan (continued)

Listing 14.11. Function to generate saved plans from the data model

Listing 14.12. Workout plan click listeners for saving, loading, and clearing the plan

Listing 14.13. Exercise library listening for clicks on exercises and adding to the plan

Listing 14.14. New project’s index.html with workout playback overlay

Listing 14.15. Additional methods to support workout plan playback

Listing 14.15. Additional methods to support workout plan playback (continued)

Listing 14.16. A simple event bus

Listing 14.17. Add event listener in workout player to receive time updates

Listing 14.18. Dispatching events to the event bus from the workout plan data model

Chapter 15. Hiding your complexities

Listing 15.1. An example WebGL shader

Listing 15.1. An example WebGL shader (continued)

Listing 15.2. A-Frame hello WebVR scene

Listing 15.3. A model-viewer component demo

Listing 15.4. Poly search component with a model-viewer component to preview

Listing 15.5. Filtering results by glTF, including the URL on the result image element

Listing 15.6. AR with the model-viewer component

Listing 15.7. 3D color picker index.html

Listing 15.8. Application template module for HTML/CSS

Listing 15.9. Absolutely positioning elements over the 3D scene

Listing 15.10. Application component JS

Listing 15.11. HTML/CSS for the 3D scene component

Listing 15.12. Web Component setup for the 3D scene component

Listing 15.13. 3D scene setup code

Listing 15.14. Functions to update the 3D object, color, and alpha

Listing 15.15. Simple video playback demo

Listing 15.16. Setting a video filter

Listing 15.17. Custom filter demo to introduce video “snow”

Listing 15.18. WebGL video component demo

Listing 15.19. Custom shaders used in the WebGL video component

Listing 15.20. Hand-tracking Web Component

Listing 15.21. Handtracker demo HTML file

Listing 15.22. Web Harp app component integrated with the handtracker component

Appendix Appendix. ES2015 for Web Components

Listing A.1. Declaring a var inside a for loop block

Listing A.2. Declaring a variable with let inside a for loop block

Listing A.3. Using the constructor method of a class

Listing A.4. Calling super() is required in a subclass’s constructor

Listing A.5. A generic class example for any language

Listing A.6. Declaring your properties in the constructor instead of on the class itself

Listing A.7. Pseudocode for private class properties in other languages

Listing A.8. Showing bad access of private property in subclass (pseudocode)

Listing A.9. Using WeakMap to simulate private properties in JS

Listing A.10. An internally tracked mouse-click counter

Listing A.11. Creating a getter method to allow read but not write access to a property

Listing A.12. Defining both getters and setters on a class

Listing A.13. An add method on a class

Listing A.14. Example of a class method using the static keyword

Listing A.15. Static getter to share constant values across your application

Listing A.16. Example of a Java import

Listing A.17. Setting the <script> tag type to enable JS modules

Listing A.18. Exporting multiple functions in the same module

Listing A.19. Importing specific and multiple functions from the same module

Listing A.20. Aliasing functions from a module

Listing A.21. Aliasing functions as a group from a module

Listing A.22. A timer example showing loss of scope within a class

Listing A.23. Directly calling a function to avoid scope loss

Listing A.24. Using the fat arrow to maintain scope