我正在尝试使HTML Imports正常工作,但到目前为止还算有些运气。具有原生支持功能的Chrome可以很好地完成工作,但在Firefox和webcomponents.org的Polyfill甚至都没有获取CSS,我在开发人员工具的网络部分对此进行了验证。 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中使用。任何朝着正确方向的指针都将不胜感激。

最佳答案

对polyfill进行调试后发现,也具有<link rel="stylesheet">属性的type="text/css"元素将被忽略。

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

09-11 19:46
查看更多