liveBook · Manning

Progressive rendering

As explained in Web Components in Action

Incremental rendering updates only the portions of a rendered interface whose output has changed instead of replacing the entire rendered subtree.

Progressive rendering updates only the portions of an interface whose output changed. Unlike replacing a component’s entire innerHTML, this approach can avoid performance hiccups in large DOM trees. section 6.6

lit-html applies this technique to HTML and CSS templates. Tagged templates describe markup, while rendering compares the result and replaces only changed portions. section 6.6

Repeating menu options

A component can render logo and background choices from arrays, using lit-html’s repeat directive to populate select menus while preserving the surrounding template structure.

How Web Components in Action covers it

How deep it goes
Explains the performance contrast with innerHTML and demonstrates template repetition, but does not detail the rendering algorithm’s internals.
Examples
Demonstrates repeated select options for logo and background choices in a Web Component.
What it assumes
Assumes familiarity with HTML, CSS, DOM trees, Web Components, JavaScript modules, and template literals.
What you can do after
Apply it via lit-html to render repeated data and update component markup without replacing the entire rendered subtree.
How it connects
Connects progressive rendering with lit-html, HTML templates, the DOM, tagged templates, and Web Components.
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.