Polyfilled HTML 导入：为什么 CSS 没有被提取？

Question

我正在尝试让 HTML 导入工作，但到目前为止只是部分运气。 Chrome 凭借其原生支持做得很好，但在例如来自 webcomponents.org 和 CSS 的 Polyfill 的 Firefox 甚至都没有被获取，我在开发者工具的网络部分验证了这一点。 JS 按预期加载。

这是我正在做的一个最小示例：

<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>

我是否需要做一些额外的事情来处理 polyfilled 环境中的 CSS？

我很确定与 CORS 相关的阻塞不是问题，因为相同的设置适用于 Chrome。非常感谢任何正确方向的指示。

Answer 1

调试 polyfill 显示 <link rel="stylesheet"> 元素也有 type="text/css" 属性被忽略。

这是一个错误，已在 https://github.com/webcomponents/webcomponentsjs/issues/400 进行跟踪。

Polyfilled HTML 导入：为什么 CSS 没有被提取？

Polyfilled HTML Imports: Why is the CSS not fetched?

css

web-component

polyfills

html-imports