css - Polyfilled HTML 导入 : Why is the CSS not fetched?

标签 css web-component polyfills html-imports

我正在尝试让 HTML 导入工作,但到目前为止只是部分运气。具有 native 支持的 ​​Chrome 做得很好,但在例如。带有来自 webcomponents.org 的 Polyfill 的 Firefox 甚至没有获取 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>

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

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

最佳答案

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

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

关于css - Polyfilled HTML 导入 : Why is the CSS not fetched?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36690701/

相关文章:

css - 跨浏览器 CSS3 关键帧动画 Firefox

angular - 将值传递给子组件 Angular2

javascript - 鼠标悬停事件 Lit-Element/Polymer

angular - 由 polyfills.bundle.js 发起的 API 请求

angular - 如何使 Angular 8 与 IE11 兼容?

javascript - 未指定 js 扩展时,Angular2 Typescript 应用程序在组件上抛出 404

javascript - 使用jquery,如何根据变量更改div位置

javascript - 从 jquery ajax 加载导入数据时创建的重复 div 标签

css - 下拉检查列表将 Div 向下推而不是重叠

javascript - 是否可以通过父文档访问 Shadow DOM 元素?