liveBook · Manning

Backward compatibility

As explained in Web Components in Action

Compatibility of software with earlier browsers, platforms, or versions of a technology.

Backward compatibility keeps a component usable when browsers lack newer platform features. A practical strategy is to polyfill Custom Elements while making Shadow DOM optional instead of hiding its limitations behind a polyfill. section 12.1

A compatibility-oriented component can:

  • Load the drop-in Custom Elements polyfill from a CDN. section 12.1

Optional Shadow DOM

Set a component flag such as USE_SHADOWDOM_WHEN_AVAILABLE. If the flag and attachShadow are available, use the shadow root; otherwise use the component itself as the rendering root.

How Web Components in Action covers it

How deep it goes
Builds a conditional rendering strategy, selector conversions, and a polyfill setup; defers the IE11 transpilation step.
Examples
Uses a color picker, a slider, CDN loading, conditional roots, class selectors, and host-context styling.
What it assumes
Assumes familiarity with HTML, DOM APIs, custom elements, CSS selectors, and component rendering.
What you can do after
Operate/configure components that fall back from Shadow DOM while preserving rendering and styling behavior.
How it connects
Connects Web Components with Custom Elements, Shadow DOM, polyfills, CSS selectors, and transpilation.

Also explained in

Compare how 18 books explain backward compatibility →

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.