Chapter 12. Building and supporting older browsers


This chapter covers

  • Module bundling with Rollup
  • Transpiling with Babel to allow Web Components in IE11
  • Running and combining scripts with npm and package.json
  • Using dev dependencies in package.json
  • Ponyfilling CSS vars for IE11

In the last chapter, we finished building a reusable color picker component consisting of a few different custom components itself. It works pretty well, but the question now is whether this component works for all your target users. It certainly could, and we might stop here. The component we’ve built supports Chrome, Firefox, and Safari. This leaves only one modern browser left: Microsoft Edge.

As of now in this book, we’ve covered nearly every Web Component concept possible. Our learnings took us from creating Web Components with just Custom Elements to then capping everything off with the amazing Shadow DOM.

12.1. Backward compatibility

12.2. Building for the least common denominator

12.3. Build processes

12.4. Building components

12.5. Transpiling for IE