问题标签 [html-imports]

考虑以下test-elementWeb 组件定义（在 Google Chrome 上运行的原生 JavaScript，而不是 Polymer），它创建了一个简单的width=500px. 它的attachedCallback函数将其宽度输出到控制台，然后设置一个异步延迟再次执行此操作：

测试元素.html

然后我创建一个导入的页面test-element，并再次从内联脚本标签输出其宽度：

索引.html

控制台的输出是：

这证明attachedCallback(1) 在布局和绘制之前被调用，有时这确实是我想要的。例如，如果我想将其宽度更改为 100 像素，我可以 make testElement.style.width = "100px"，并且我不必担心组件在回调有机会进行更改之前闪烁其先前的 500px 宽度。

但是，attachedCallback有时在布局之前被调用并不是我想要的。例如，如果test-element包含一个网格，并且它需要绘制单元格，那么我需要知道它的宽度，以便我可以计算有多少单元格适合可用空间。但是我在 期间没有这些信息attachedCallback，我似乎无法掌握如何获取这些信息。

如您所见，在这个非常简单的示例中，0ms 延迟 (2) 似乎触发了布局计算。但是一旦我开始做更复杂的事情（例如当我有嵌套的 Web 组件和异步 HTML 导入时），0ms 延迟是不够的，我必须将其更改为 100ms 延迟，然后更多。

我的问题是：如何尽快可靠地获得组件的宽度（或任何其他计算样式）？

我有一个 HTML 导入元素，它是一个 DOM 元素，通过以下方式导入：

现在我想在不重新加载网站的情况下更新自定义元素。

我不知道这是否可能。

提前致谢 ;）

使用 html templates。在代码方面，很难为每个 html 文件保留正确的模板集。

是否可以有一个模板文件，就像一个文件一样css，包含在文件的head部分中html？

例如，为了补充 中的style部分head，可以链接到样式表，例如，

我的应用程序使用了几个templates. 可以像样式表一样处理它们，即链接到单独的文件中，还是每个template定义都需要直接成为原始html文件的一部分？

要在 web-components 中使用 javascript-libraries，我已经看到了将它们包装到 html-import 中的模式，如下所示：

（时刻.html）

<script type="application/javascript" src="bower_components/moment/moment.js"></script>

（组件.html）

<link rel="import" href="moment.html">

而不是直接在 component.html 中导入脚本。只使用 html-imports 有什么好处吗？

在过去的几天里，我一直在研究 HTML Imports，例如：

我知道它适用于最新版本的 chrome。我真的很喜欢这个想法，我想知道是否有办法让它跨浏览器，它对商业项目是否足够好？

如果没有，有没有类似的好选择？

看起来当加载一个<template>保存在外部 html 文件中的文件时，你真的可以快速地在页面上工作，所以我有兴趣研究这个。

根据http://blog.teamtreehouse.com/introduction-html-imports

要在 Chrome 中启用 HTML 导入，请转到 chrome://flags 并启用启用 HTML 导入标志。完成后，单击屏幕底部的立即重新启动按钮以重新启动支持 HTML 导入的 Chrome。

但我在最新版本的 Google Chrome 标志中找不到它

HTML<link>元素最常用于在文档中包含 CSS 样式表。典型的用法可能如下所示：

作为在响应正文中包含标记的替代方法，服务器可以使用LinkHTTP 标头指定样式表：

提议的 HTML 导入功能规范（WC3 工作草案）为元素添加了一个重要的新功能<link>：一次从另一个 HTML 文档导入所有资源的能力，可能包括多个脚本、样式和模板。一个典型的用法可能如下所示：

我的期望是，对于像这样的情况，也可以使用Link标题以与样式相同的方式指定 HTML 导入：

但是，规范工作草案仅明确提及该<link>元素；它没有引用Link标题。它还使用似乎需要一个<link>元素与每个导入相关联的语言，

每个文档都有一个导入链接列表，每个条目由链接、链接元素和位置、URL 组成。

我看到它支持样式表链接不<link rel="import" ... />支持的属性。async不可能在标题中指定它，但鉴于它是一个可选属性，我不希望这会完全阻止它的支持。

是否可以使用Link标头指定 HTML 导入？任何支持该决定的理由的参考将不胜感激。

我有一个呈现一些 Polymer 1.0 自定义元素的网页。在head我的文件部分中，我index.html有以下内容：

my-elements.htmlscript引用其他 HTML 文件（通过 HTML 导入），这些文件又使用标准标签引用 javascript 文件。

使用 Chrome 浏览器，一切都按预期工作。my-elements.html加载之前的 javascript 文件script1.js和script2.js. 但是对于 Internet Explorer (v11)，它们以相反的顺序加载。即script1.js先script2.js加载。

在下面的文章中，它指出“HTML 导入块<script>元素。在<script>加载之前的导入之前不会运行”：

https://gist.github.com/omo/9986103

那么为什么 Internet Explorer 的排序不同呢？

请注意，我使用 webcomponents-lite.js 作为我的 web 组件 polyfill 库。我怀疑我遇到的行为是由于 Internet Explorer 没有对 HTML 导入的本机支持，但想知道如何解决这个问题，以便脚本按预期顺序加载。

有没有一种更简单的方法可以使用 php.ini 即时组合所有需要的 html 导入。我正在开发一个项目，它的内容是动态生成的，不能总是使用 vulcanize。大多数情况下，我的页面可能无法完全加载（第一次加载），或者无法包含所有导入。看看这个页面

在缓慢的互联网上，您必须重新加载几次才能使浏览器赶上并加载所有文件（通过在以前的重新加载时缓存一些文件）。

目前我在加载网站时最多可以收到 115 个（超过 2.8 分钟）请求。

我可能会在文件上放置一个永久缓存过期，但是有没有办法通过使用 php 将所有已知的导入动态放入 1 个文件中来减少请求，以便在第一次加载时只发出几个请求？

后续请求不必麻烦，因为我是根据用户的需要导入它们的。