liveBookmanning.com

What you will learn in Web Components in Action

by Benjamin Farrell

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• Shadow DOMShadow DOM is a web platform mechanism that attaches an encapsulated DOM subtree to an element and isolates its internal structure and styling from the surrounding document.
• Custom ElementsThe custom elements specification defines the browser rules for registering and implementing author-created HTML elements.
• Web ComponentsA web component is a reusable web platform component with encapsulated structure, styling, behavior, and APIs.
• connectedcallbackconnectedCallback is a custom-element lifecycle callback invoked when an element is connected to a document DOM.
• moduleA module is a distinct, bounded software unit that groups related code or functionality and provides an organizational or interaction boundary within a larger system.
• :host selectorThe :host CSS pseudo-class selector matches the shadow host from within its shadow tree.
• attributeAn attribute is a named property, value, or piece of information associated with an entity, object, or program element.
• innerHTMLinnerHTML is a DOM property that gets or sets the serialized HTML markup contained within an element.
• HTML template elementThe HTML template element is an HTML element that holds inert markup which can be instantiated as a document fragment.
• transpilationTranspilation is the source-to-source transformation of code from one readable programming language or language version into another.
• canvas elementThe HTML canvas element is a scriptable bitmap drawing surface in a web document for rendering graphics.
• GPUA GPU is a processor specialized for performing highly parallel graphics and numerical computations.
• shaderA WebGL shader is a small GPU-executed program that processes graphics data such as pixels or vertices.
• attribute reflectionThe synchronization of an element's content attributes with corresponding JavaScript properties.
• shadow rootA shadow root is the root node of an encapsulated Shadow DOM subtree attached to a host element, with open or closed access modes.
• CSS variableA CSS variable is a custom CSS property whose value can be defined and substituted throughout a stylesheet or component style.
• polyfillA compatibility implementation that provides a newer web platform feature in environments lacking native support.
• eventA change event is a browser-dispatched DOM event indicating that the value of a form control has changed.
• template literalAn ECMAScript string literal delimited by backticks that supports interpolation and multiline content.
• color pickerA color picker is a user-interface control for selecting a color and optionally related properties such as transparency.
• A-FrameA-Frame is a web framework for declaratively creating 3D and virtual-reality experiences with HTML-like elements.
• augmented realityAugmented reality is an interactive experience that overlays computer-generated content onto a user's view of the physical world.
• model-viewermodel-viewer is a web component for displaying interactive three-dimensional models in web pages and augmented-reality experiences.
• mixed realityMixed reality is an immersive computing domain that combines virtual content with perception of or interaction in the physical world.
• import statementA JavaScript module declaration that makes exported bindings from another module available in the current module.
• geometry3D is the representation and rendering of objects or scenes with three spatial dimensions.
• computer visionComputer vision is the computational analysis of images or video to infer information about the physical world.
• a-scene elementThe a-scene element is an A-Frame element that represents and manages a 3D scene.
• fragment shaderA fragment shader is a GPU program that determines the color and other attributes of rasterized fragments or pixels.
• head trackingHead tracking is the measurement of a user's head position and orientation over time.
• immersive modeImmersive mode is a display mode that presents an experience through a full-screen or headset-based immersive view.
• nonvisual componentA nonvisual component is a component represented in markup that contributes behavior or data without directly rendering a visible interface.
• sensor fusion algorithmA sensor fusion algorithm combines measurements from multiple sensors to estimate motion or orientation more accurately.
• vertex shaderA vertex shader is a GPU program that transforms or processes the vertices of rendered geometry.
• WebVRWebVR is a web API specification for displaying virtual-reality content and receiving headset and controller pose input.
• WebXRWebXR is a web API standard for accessing virtual, augmented, and other immersive device capabilities.
• queryselectorquerySelector is a DOM method that returns the first descendant element matching a CSS selector.
• data modelA structured representation of the data and relationships an application manages.
• handlerAn event listener is a callback registration that causes code to run when a specified event occurs on an object.
• accessor methodAn accessor method or function provides access to an object's property or state by retrieving its value, assigning a value, or defining behavior for such access.
• WebComponentsReadyWebComponentsReady is a browser event signaling that Web Components polyfills and component definitions have finished loading.
• arrow functionAn ECMAScript function expression written with arrow syntax that lexically captures the surrounding this value.
• package.jsonpackage.json is a JSON configuration file that describes a JavaScript package, including its metadata, dependencies, and executable scripts.
• MutationObserverMutationObserver is a browser API that asynchronously reports changes to a DOM subtree, including attribute and child-node mutations.
• dependencyA software dependency is a component, resource, or prerequisite on which another software component or operation relies to function or proceed.
• Web Component TesterWeb Component Tester is a test runner and testing toolkit designed for testing Web Components in browsers.
• HTMLElement APIThe HTMLElement API defines the base interface and behavior inherited by HTML elements and custom elements.
• CSS encapsulationA styling isolation technique that prevents styles defined outside a component from unintentionally affecting its internal elements.
• deployment pipelineA build step is an automated processing stage that transforms or prepares source code and assets for development or production.
• npm scriptnpm scripts are named commands declared in package.json and executed through npm to automate project tasks.
• npmnpm is a package manager and software registry for JavaScript and Node.js packages.
• Shady CSSShadyCSS is a CSS compatibility technique or polyfill library for approximating Shadow DOM style scoping where native CSS encapsulation is unavailable.
• inheritanceInheritance is a mechanism by which a child type or element receives properties, values, or behavior from a parent, subject to system rules and possible overrides.
• initializerA constructor is a function or method invoked to initialize a newly created object of a particular class or type.
• bundlingModule bundling is the process of combining source modules and their dependencies into one or more deployable output files.
• RollupRollup is a JavaScript module bundler that compiles ES modules into optimized output bundles.
• :host-context() selectorThe :host-context() selector is a Shadow DOM CSS selector that matches a shadow host when an ancestor satisfies a specified selector.
• contractA defined programming interface through which a software component exposes operations or data to other components.
• attributechangedcallbackattributeChangedCallback is a custom-element lifecycle callback invoked when an observed HTML attribute is added, removed, or changed.
• design systemA design system is a coordinated collection of interface design principles, visual styles, and reusable UI patterns for maintaining consistency across an application.
• sliderA slider is a user-interface control that lets a user select a value along a continuous or discrete range.
• source mapA source map is a mapping file that relates generated code locations to their original source-code locations.
• tree-shakingTree shaking is static analysis that removes imported code and other module parts that are not used from a bundle.
• Universal Module DefinitionUniversal Module Definition is a module wrapper format that supports multiple JavaScript loading environments, including CommonJS, AMD, and browser globals.
• Web HarpWeb Harp is a book-specific browser musical-instrument application whose strings are represented by Web Components.
• Node.jsNode.js is a JavaScript runtime built on the V8 engine for executing JavaScript outside the browser.
• componentA component is a reusable, standalone unit of interface code that combines structure, styling, behavior, and optionally a customization API.
• webharp-appwebharp-app is a book-specific Web Component that represents the entire Web Harp application and contains its child components.
• wcia-photo-carouselA book-specific custom HTML element representing a photo carousel with album metadata, photo URLs, and navigation controls.
• flexboxCSS Flexbox is a one-dimensional layout model for arranging elements along a row or column with flexible sizing and alignment.
• http-server moduleA command-line Node.js package that serves files over HTTP from a local directory.
• photo carouselA user-interface component that presents a sequence of photos and provides controls for moving between them.
• date pickerA browser-provided date input control that lets a user enter or select a calendar date.
• development dependencyA development dependency is a software package required for developing, testing, or building an application but not normally required at runtime.
• event busAn event bus is a messaging pattern that routes published events between decoupled parts of an application.
• backward compatibilityCompatibility of software with earlier browsers, platforms, or versions of a technology.
• disconnectedcallbackdisconnectedCallback is a custom-element lifecycle callback invoked when an element is disconnected from a document DOM.
• accelerometerAn accelerometer is a sensor that measures linear acceleration along one or more axes.
• autorotationAutorotation is automatic continuous rotation of a displayed 3D object or scene.
• document.registerElementdocument.registerElement is an obsolete browser API formerly used to register custom elements.
• glTFglTF is a standard format for efficiently transmitting and loading 3D scenes and models.
• gyroscopeA gyroscope is a sensor that measures angular velocity or rotational movement.
• magnetometerA magnetometer is a sensor that measures magnetic fields and can determine compass heading.
• render loopA render loop is a repeated execution cycle that updates and redraws an interactive graphics scene.
• stereoscopic 3dStereoscopic 3D is the perception of depth produced by presenting slightly different viewpoints to the two eyes.
• tracked surfaceA tracked surface is a physical planar area inferred from camera observations and represented for placement of virtual content.
• USDZUSDZ is a packaged 3D asset format used by Apple platforms for viewing and augmented-reality presentation.
• JavaScriptJavaScript is a programming language standardized as ECMAScript and commonly executed in web browsers.
• KarmaKarma is a JavaScript test runner that executes tests in real browsers or other browser-like environments.
• karma-web-componentskarma-web-components is a Karma plugin that enables HTML test files and waits for Web Components readiness before running tests.
• timerA timer is a program mechanism that schedules code to execute after a delay or at recurring intervals.
• Model–view–controllerAn application architecture pattern that separates model data and business logic, view presentation, and controller input handling into distinct responsibilities.
• test-driven developmentTest-driven development is a software development methodology in which tests are written alongside or before the implementation they validate.
• event bubblingEvent bubbling is DOM event propagation in which an event moves from its originating element upward through ancestor elements.
• encapsulationA software design technique that hides an object's internal state and implementation behind a simpler external interface.
• controllerIn Model-View-Controller architecture, the coordination layer that handles input and mediates updates between the view and model.
• WorkoutPlanDataWorkoutPlanData is the book's application data module representing the centralized editable workout-plan data model.
• local storageLocal storage is a browser-provided, origin-scoped key-value storage mechanism whose values are strings and can persist across browser sessions.
• viewIn Model-View-Controller architecture, the presentation layer that renders an application's visual interface.
• workout planA workout plan is an ordered collection of exercises and associated duration or repetition information.
• color paletteTheming is the practice of defining and applying a coordinated visual style across an interface or component system.
• brightnessBrightness is the color attribute describing the perceived lightness of a color.
• coordinate pickerA coordinate picker is a two-dimensional user-interface control for selecting values by dragging along horizontal and vertical axes.
• saturationSaturation is the color attribute describing the intensity or purity of a color.
• id attributeAn HTML attribute that assigns an identifier to an element for document and selector-based addressing.
• BabelBabel is a JavaScript compiler and transpiler that converts modern JavaScript syntax and related language features into forms supported by older environments.
• ponyfillA compatibility implementation that provides a newer feature through an explicit library interface without modifying the host environment's native APIs.
• DOM fragmentA document fragment is a lightweight DOM node that can contain a subtree of nodes without itself being part of a document tree.
• slot elementThe HTML slot element defines a placeholder in a component's shadow tree for user-provided or assigned content.
• CSS selectorA CSS selector is a pattern that identifies elements to which stylesheet rules apply.
• closed modeClosed mode is a Shadow DOM configuration in which a host element does not expose its shadow root through the standard shadowRoot property.
• attachShadowattachShadow is a browser DOM method that attaches a shadow root to an element and returns a reference to that root.
• protection by conventionProtection by convention is a software encapsulation practice that relies on users respecting intended privacy boundaries rather than enforcing them technically.
• observedattributesobservedAttributes is a static custom-element class property or getter that specifies the attribute names monitored by attributeChangedCallback.
• customElements.whenDefinedcustomElements.whenDefined is a browser API method that returns a promise fulfilled when a specified custom element name has been defined.
• event dispatchEvent dispatch is the DOM operation of delivering an event from a document or element to matching event listeners.
• Internet ExplorerInternet Explorer is a web browser whose final major version, Internet Explorer 11, lacks many newer web platform and ECMAScript features.
• style creepStyle creep is the unintended spread of CSS rules beyond the elements or component boundaries they were meant to affect.
• CSS classA CSS class is a named classification applied to elements so that matching CSS rules can style them.
• color scaleA gradient is a visual transition in color or opacity across a spatial region.
• module scriptAn HTML script-loading mode that interprets a script as an ECMAScript module and enables module loading semantics.
• CSS moduleA CSS module is a proposed module type for importing CSS content through a module system.
• shadow hostA shadow host is the page-DOM node to which a shadow root is attached and whose shadow tree it parents.
• lit-htmllit-html is a JavaScript library for efficiently rendering HTML templates with tagged template literals.
• testSoftware testing is the systematic execution and evaluation of software to detect defects and verify expected behavior.
• Babel preset-envBabel preset-env is a Babel configuration preset that selects syntax transformations based on target JavaScript environments.
• css-vars-ponyfillcss-vars-ponyfill is a client-side JavaScript library that processes CSS custom properties into CSS declarations supported by older browsers.
• Document Object ModelThe standardized object representation of an HTML or XML document that scripts and browsers can inspect and manipulate.
• data bindingData binding is a technique for synchronizing application data with a user interface or component state.
• assertionA software assertion is an executable check of an expected condition or property that signals failure when the check does not hold.
• assertion libraryAn assertion library is a software library that provides operations for checking expected conditions in automated tests.
• browser testingBrowser automation is the programmatic launching and control of web browsers to execute tests and report their results.
• ChaiChai is a JavaScript assertion library providing interfaces for expressing test expectations.
• component testingComponent testing is the practice of verifying a reusable interface component's behavior, rendering, and public API in isolation.
• MochaMocha is a JavaScript test framework that provides facilities for defining and running tests.
• SeleniumSelenium is a browser automation framework for driving web browsers programmatically.
• tagged templateA template literal expression passed to a function tag that can interpret its literal parts and interpolated values.
• evaluation suiteA test suite is a named group of related automated tests.
• HTML moduleAn HTML module is a proposed module type that packages HTML content for import through a module system.
• classA class is a programming-language construct that defines a type’s structure or behavior and provides a basis for creating or representing objects.
• requestAnimationFramerequestAnimationFrame is a browser API that schedules a callback to run before the next screen repaint.
• Shady DOMShady DOM is a lightweight emulation of Shadow DOM behavior that enables shadow-style scoping where native Shadow DOM is unavailable.
• progressive renderingIncremental rendering updates only the portions of a rendered interface whose output has changed instead of replacing the entire rendered subtree.
• design languageA shared set of visual and interaction conventions that gives related interface components a consistent appearance and behavior.
• transparencyTransparency is the degree to which a rendered color allows the background behind it to show through.
• mouse-move eventA mouse-move event is a browser-dispatched event indicating movement of a pointing device over a target.
• HTML ImportsHTML Imports is a proposed, nonstandard web platform mechanism for importing an HTML document and its associated component resources into another document.
• leading underscore conventionThe leading underscore convention prefixes an identifier with an underscore to signal intended internal or non-public use without enforcing access restrictions.
• private memberA private member is a program element whose direct access is restricted to its defining class, module, file, or other language-defined scope.
• dependency hellDependency hell is a software-maintenance condition in which numerous interdependent resources create difficult tracking, ordering, and version-management problems.
• script elementAn HTML element that embeds executable code or references an external script file for a document.
• CSSCSS is the stylesheet language used to describe the presentation of structured web documents.
• handtrack.jsHandtrack.js is a JavaScript library that detects and tracks hands in video imagery using a machine-learning model.
• TensorFlow.jsTensorFlow.js is a JavaScript library for developing and executing machine-learning models in web browsers and other JavaScript environments.
• LitElementLitElement is a base class from the Lit project for creating Web Components with reactive properties and lit-html rendering.
• event typeAn event type is a string identifier that distinguishes the kind of event delivered through an event system.
• static getterA static getter is a JavaScript getter declared on a class or class-like object and accessed without creating an instance.
• /deep/ selectorThe /deep/ selector is a deprecated Shadow DOM CSS combinator for matching descendants across a shadow boundary.
• ::shadow selectorThe ::shadow selector is a deprecated Shadow DOM CSS selector for targeting elements across a shadow boundary.
• customElements.getcustomElements.get is a browser API method that returns the class constructor registered for a custom element name, or undefined when none is registered.
• CSS Shadow PartsCSS Shadow Parts is a web platform feature that lets shadow-tree elements expose named parts for styling from outside the shadow tree.
• video componentA video component is a book-specific Web Component that acquires video frames, renders them, and exposes frame data for processing.
• image filterAn image filter is a defined pixel transformation that produces a modified image or video frame.
• image processingImage processing is the computational transformation or analysis of image and video pixel data.
• lifecycleA Unity component lifecycle is the sequence of phases and callbacks governing a component in the Unity game engine.
• pixelA pixel is an individual picture element represented by color-channel values in an image or video frame.
• video effectA video effect is a transformation applied to video imagery to alter its appearance or presentation.
• video streamA video feed is a continuing sequence of video frames supplied by a camera or another source.
• video frame dataVideo frame data is the array of color-channel values representing one decoded frame of a video stream.
• WebGL contextA WebGL context is the browser graphics interface that lets scripts render hardware-accelerated graphics through WebGL.
• DOM propertyA JavaScript-accessible value associated with a DOM element object.
• microframeworkA small software framework that provides focused application structure or functionality with limited imposed architecture.
• shadow partA shadow part is a named element in a shadow tree that can be styled from outside the shadow boundary through the CSS ::part mechanism.
• shadow themeA shadow theme is a proposed styling mechanism for applying theme-related styles across a shadow DOM boundary.
• open modeOpen mode is a Shadow DOM attachment setting that exposes the attached shadow root through the host's shadowRoot property.
• specificityCSS specificity is the precedence system that determines which competing stylesheet declarations apply to an element.
• no-framework developmentNo-framework development is building web applications without adopting a general-purpose application framework.
• MIDI.jsMIDI.js is a JavaScript library that provides MIDI-related functionality and real-time musical tone generation in web applications.
• machine learningMachine learning is a field in which computational models learn patterns from data to perform tasks such as classification or prediction.
• HTMLImports.whenReadyA callback API provided by the HTML Imports polyfill that runs after imported HTML resources are ready.
• composed propertyThe composed property is a DOM event option that determines whether an event can propagate across a shadow boundary.
• event.composedPathevent.composedPath is a DOM event method that returns the ordered propagation path an event follows through the document and related objects.
• event.currentTargetevent.currentTarget is the DOM event property identifying the object whose event listener is currently handling the event.
• event targetevent.target is the DOM event property identifying the original element on which an event occurred.
• hand trackingHand tracking is the computational detection and tracking of human hands in visual input.
• build systemA build system is software that automates transforming source code and project inputs into artifacts through tasks such as compiling, testing, and packaging.
• adoptedcallbackadoptedCallback is a custom-element lifecycle callback invoked when an element is adopted into a different document.
• adaptable componentAn adaptable component is a reusable interface component whose presentation can vary according to its usage context.
• named slotA slot identified by a name so that matching child content can be assigned to a specific distribution point.
• garbage collectionGarbage collection is automatic memory management that reclaims storage occupied by objects no longer reachable by a program.
• CSShakeCSShake is a CSS library that provides animation classes for making elements appear to shake.
• componentdidmountcomponentDidMount is a React lifecycle method invoked after a component has been mounted into the DOM.
• error boundaryAn error boundary is a React component mechanism that confines errors from a component subtree so they do not unmount or disrupt the rest of the application.
• mountMounting is the process of creating a component's rendered representation and inserting it into the DOM.
• renderingA render method is a component method that returns the markup representing the component's rendered content.
• node cloningcloneNode is a DOM method that creates a copy of a node, optionally including its entire descendant subtree.
• template content propertyThe template content property exposes the template element's stored markup as a document fragment.
• frameworkA software framework is a reusable application structure that provides conventions, abstractions, and extension points for development.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.