问题标签 [html-imports]

我正在尝试使用将 HTML 文档导入到我的主文档中

但它似乎没有工作。

我正在关注此演示文稿，使用 Chrome 28，并在以下位置启用了这两个标志about:flags：

我错过了什么吗？还是我需要启用另一个标志才能获得它？

因此，这篇HTML 导入文章中的第一个事实部分指出，html 导入比多次请求（并执行 - 如果是 javascript）资源更清楚。

这适用于 HTML 导入的框架，但不适用于其他类型的导入（如在 javascript 中）。在 devtools 的这个网络视图中，您可以看到Polymer.html首先从 javascript ( d3.js) 加载，然后再从 HTML 导入 ( my-app.html) 加载，这是我没想到的。

有没有办法明确告诉 HTML 导入已经加载了资源（在这种情况下从 javascript 中加载）？

我正在通过HTML Imports使用Web Components和Polymer加载资产创建一个网站。

我的标记如下所示：

在assets.html我以一种应避免渲染阻塞的方式显式加载 CSS：

但是，当我通过 Google 的PageSpeed Insights运行我的网站时，我收到以下错误：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS

您的页面有 2 个阻塞的 CSS 资源。这会导致呈现页面的延迟。

如果不等待以下资源加载，则无法呈现页面上的任何首屏内容。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。

优化以下 CSS 交付：

http://is-aws-assets.divshot.io/main.min.css

http://fonts.googleapis.com/ …y=Source+Sans+Pro:200,300,400,600,700,90

令我困惑的是，谷歌自己的官方优化 CSS 交付指南明确指出 HTML 导入应该加载 CSS 而不阻塞渲染：

请注意，Web 平台将很快支持以非渲染阻塞方式加载样式表，而无需使用 JavaScript，使用 HTML 导入。

难道我做错了什么？这是 PageSpeed Insights 的错误吗？

我一直在学习普通版的 Web 组件，但遇到了障碍。当尝试使用模板标签内的引​​导程序中的网格时，特别是容器类，它不会对其应用任何引导程序样式。

一般的 Bootstrap 样式（字体、样式重置等）正在正确应用，并且没有出现控制台错误。

我试图将引导程序的链接和脚本文件放在模板文件中（但在模板标签之外，因为链接标签不会在模板标签中呈现）。Bootstrap 将像我在索引页面上调用它一样加载，但容器仍然不会从 Bootstrap 继承任何样式。

非常感谢您提供的任何帮助！

我需要在其他文件中导入一个通用的 HTML 文件，以便可以重复使用。我关注了这篇文章，这个概念在 Chrome 中运行得非常好。但它似乎在 Firefox 和 IE 中不起作用。后来我发现目前只有 Chrome（V.36.0 及更高版本）支持它。

我想问是否有一种解决方法可以使该功能跨浏览器工作？任何帮助表示赞赏。

谢谢。

所以我在我的应用程序中加载一个加载屏幕。link然后我通过在 JavaScript 中创建一个元素来通过 HTML 导入加载我的自定义元素。我需要知道此 HTML 导入何时完成加载以向用户显示内容。下载完成时 HTML 导入会触发事件吗？

我正在写一个聊天。当我在一个 HTML 中编写所有 DOM 模块时，它在 Chrome 中可以正常工作，但 DOM 模块在 Edge 中无法正常工作。但后来我将所有 DOM 模块移到另一个 HTML 文件中。现在它可以在 Edge 中使用。但是现在 Flexbox 并不适用于所有浏览器。

我写了一些示例：

一个 HTML 中的所有 DOM 模块： http ://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview

另一个 HTML 中的 DOM 模块： http ://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview

我不知道为什么，但在 Chrome 中，第二个示例可以正常工作，尽管在整个项目中它与 Flexbox 有问题。但是第二个示例在 Edge 中存在相同的问题。见第二张图。

Edge 中的第一个示例（未加载 DOM 模块）：

Edge 中的第二个示例（“flex-basis：0”和“flex-grow：1”不起作用）：

Chrome中的正确结果：

索引.html：

样式.css：

注意：最后这个问题的更新（包括解决方案）......

我无法<google-chart>在我的页面上呈现元素。

我使用 Yeoman 的 Polymer 生成器搭建了一个 Polymer 项目。我添加了一些自定义元素，还从Polymer Catalog导入并实例化了 Iron 和 Paper 元素。我正在使用标准程序来执行此操作：

1. bower install --save [[polymerElement]]， 然后
2. <link rel="import" href="../bower.../[[element]].html">在elements.html.

按照Google Web Components 目录部分中的<google-chart>说明，我尝试在我的页面上呈现他们的示例饼图。虽然元素没有正确呈现，但控制台中没有错误，元素的页面内容存在间隙，并且标记全部出现在我的检查器中，但有 2 个例外：

1. 呈现的 HTML 不包含“行”属性，我似乎无法修复。
2. 组件的内部内容<google-chart>相当稀疏，只有 3 个子元素：
   • <iron-ajax>
   • <div>
   • <google-legacy-loader>

以下是相关代码：

元素.html：

索引.html：

更新：

正如Supersharp所说，此<google-charts>代码在单页环境中加载。

至于在我正在工作的 Yeoman-scaffolded Polymer 环境中加载，经过进一步测试，只要对象<google-chart>不在标签中，它似乎就会加载到主app/index.html文件中：<template>

但是，我需要<google-charts>在该块中加载<template>组件（所有其余内容都在其中）。

谁能解释为什么这不会加载到<template>块中？

谁能进一步解释我如何让这个元素在应用程序中我想要的任何地方呈现？

提前非常感谢大家。

解决方案：

使用注册和生命周期回调，我已使用以下方法成功地将其呈现在模板中：

首先，将可查询元素添加到<template>元素中以用作容器：

其次，在Polymer()构造函数内部，创建<google-chart>元素并将其作为attached生命周期事件的一部分附加到容器：

虽然在屏幕上渲染元素会有一点延迟，但这是一个可行的解决方案。

您好，我在 Chrome 和 Opera 上有一个可用的 Polymer 1.0 网页。现在我需要该页面在 Firefox 和 Safari 中运行。我有以下测试：

我试过改变

至

或者

我认为 webcomponents 的 Polyfills 会处理 html 导入。但它不起作用。在 Firefox 中，我收到以下错误：

我无法使用 Safari 对其进行测试，但我希望得到类似的结果。

我做错什么了吗？我怎样才能使这项工作？

我还尝试删除 webcomponents 并运行 bower update 以再次安装它们。

谢谢你

编辑：

我有两个文件。索引.html：

和元素文件：

这工作正常。我的问题是如果我删除 addEventListener。Firefox 得到同样的错误：

好像 Polyfill 没有及时加载。有没有办法来解决这个问题？添加 addEventListener 是正确的方法吗？

谢谢

作为标题，我在我的网站中使用了 HTML 导入链接：

变体“链接”在 Chrome 中返回一个文档，但在 Safari 和其他浏览器中返回 null。我知道目前只有 Chrome 支持 HTML 导入功能，所以我在导入链接之前添加了以下代码以加载 Polymer 的 webcomponents.js：

但它仍然在其他浏览器中返回 null，谁能告诉我如何解决它？