Search code examples
cssweb-componentpolyfillshtml-imports

Polyfilled HTML Imports: Why is the CSS not fetched?

I'm trying to get HTML Imports to work, but only partial luck so far. Chrome with its native support does a good job, but in e.g. Firefox with the Polyfill from webcomponents.org the CSS is not even fetched, which I verified in the network section of the developer tools. The JS is loaded as expected.

Here is a minimal example of what I'm doing:

<head>       
  <script src="webcomponents.min.js"></script>
  <link rel="import" id="htmlImport" href="http://some-site.com">
</head>
<body>  
  <div id="component"></div>

  <script type="text/javascript">
    window.addEventListener('HTMLImportsLoaded', function(e) {
      var imported = document.getElementById('htmlImport').import;
      if (typeof imported !== 'undefined') {
        document.getElementById('component')
          .appendChild(document.importNode(
            imported.getElementById('container'), true));
        }
    });
</script>
</body>

Do I have to do something extra to handle the CSS in the polyfilled environment?

I'm quite sure that CORS related blocking is not an issue, since the same setup works in Chrome. Any pointers in the right direction are greatly appreciated.

Solution

  • Debugging the polyfill revealed that <link rel="stylesheet"> elements which also have a type="text/css" attribute are ignored.

    This is a bug, which is tracked at https://github.com/webcomponents/webcomponentsjs/issues/400.