Polymer: Disable HTML Import caching

Question

How do I disable HTML Import caching for Polymer development? Changes made to my custom HTML web component are not being shown when I refresh the browser.

Answer 1

HTML Import caching will sometimes mean that changes made to HTML files that get imported do not get reflected upon browser refresh. Take the following import as an example:

<link rel="import" href="./my-element.html">

If a change is done to my-element.html after previously loading the page, then the changed file may not be downloaded and used in the current document when it is refreshed (as it was previously imported and cached). This can be great for a production, but might hinder development.

To disable this in Google Chrome:

• Open up Google Chrome's DevTools
• Select the Main Menu > Settings
• Go to the Network section
• Select "Disable cache (while DevTools is open)"

This will avoid caching HTML Imports, but only when DevTools is open.