Polyfill
A polyfill is a compatibility implementation that supplies a platform or language feature missing from an execution environment.
Web Components in Action
A compatibility implementation that provides a newer web platform feature in environments lacking native support.
- How it is used
- Bridges missing Web Components support while prompting a feature-by-feature choice between a polyfill and a fallback.
- How deep it goes
- Shows script inclusion and a conditional Shadow DOM fallback, while distinguishing easy DOM polyfilling from harder CSS encapsulation.
- Examples
- Uses a Custom Elements CDN script, an HTML Imports page, and a component that switches between shadow and light DOM.
- What you can do after
- Apply it via custom-elements or webcomponentsjs, and evaluate when Shadow DOM limitations call for a non-shadow fallback.
Secrets of the JavaScript Ninja, Second Edition
A polyfill is code that implements a feature in environments that do not natively support it, emulating the missing behavior.
- How it is used
- Provides missing browser functionality as part of a cross-browser strategy.
- How deep it goes
- Works through feature detection and an Array.prototype.find implementation, including predicate checks and array iteration.
- Examples
- Demonstrates an Array.prototype.find polyfill that checks for native support and searches array values with a predicate.
- What you can do after
- Build a fallback implementation for Array.prototype.find when a browser lacks native support.
Read how Secrets of the JavaScript Ninja, Second Edition explains polyfill →
Related concepts
- Custom Elementsimplements · A custom element is an author-defined HTML element that represents application-specific content or behavior beyond that of built-in HTML elements.
- findimplements · A find operation searches a collection for the first element or entry matching a value or predicate and returns it, or indicates that no match exists.
- feature detectionused by · Feature detection is the practice of testing at runtime whether an environment supports a particular capability.
- WebComponentsReadyproduces · WebComponentsReady is a browser event signaling that Web Components polyfills and component definitions have finished loading.
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.