liveBook · Manning

Webharp-app

As explained in Web Components in Action

webharp-app is a book-specific Web Component that represents the entire Web Harp application and contains its child components.

Use <webharp-app> as the application-level Web Component: place it in the page, let it create the string component, and keep the page’s dependency surface small. section 5.2

The component coordinates the Web Harp in three steps:

  • Read the strings attribute and render a nested <webharp-strings> element with the same count. section 5.2
  • Import the strings component as an ES module, allowing its child string component to be registered and used. section 5.2
  • Listen for mouse movement, retain the previous pointer position, and pass current and previous coordinates to the strings component. section 5.3

Minimal application wiring

The page needs only the application module and the custom element: <script type="module" src="./components/app/app.js"></script> and <webharp-app strings="12"></webharp-app>. Inside connectedCallback(), WebHarpApp renders <webharp-strings strings="..."> and stores it with querySelector(). An event listener then routes mousemove events to onMouseMove(). section 5.2 section 5.3

Listing 5.5. A minimal application HTML file for our Web Harp demo
<html>
   <head>
       <title>Web Harp</title>
       <script type="module"                        #1
               src="./components/app/app.js">
       </script>
       <link href="csshake.min.css"                 #2
             type="text/css" rel="stylesheet">
       <link href="main.css"                        #3
             type="text/css" rel="stylesheet">
   </head>
   <body>
       <webharp-app strings="8"></webharp-app>
   </body>
</html>

Inspect the minimal HTML entry point that references one module and instantiates the application component with a string count. section 5.2

How Web Components in Action covers it

How deep it goes
Defines construction, module imports, child lookup, event handling, and coordinate forwarding, but leaves string behavior to child components.
Examples
Uses a Web Harp page with configurable string counts, nested string components, and mouse-driven strumming.
What you can do after
Build it from scratch by defining the element, rendering its child component, and routing pointer coordinates into the string collection.
How it connects
Connects Web Components, custom elements, ES modules, DOM events, and component composition.
Cover of Web Components in Action
liveBookmanning.com
Read Web Components in Action on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Web Components in Action. The section links point to the parts of the book it draws on.