问题标签 [html-imports]

如果我有同一个文件的两个 HTML 导入，但未解析的路径不同，浏览器会发现导入来自同一个位置，还是会两次导入元素？

例如：

我正在构建一个将 svg 图标呈现到 Shadow Dom 页面上的 Web 组件。IE

我有一个外部 svg sprite 文件，其中包含大量 SVG 图标。

Web 组件的内部将以下内容渲染到 Shadow Dom 中：

一切都在屏幕上正确呈现，但我在寻找嵌入在 SVG 中的一些信息，特别是 , 中包含的信息viewbox（例如：）viewBox="0 0 32 32"。

我知道在 中渲染的use内容也会输入到 Shadow Dom 中。但我试图找到另一种方法来获取嵌入到use. 我试图对 svg 的内容进行 ajax 处理，但这对于页面上的多个图标来说变成了一个大问题，因为 Web 组件的每个实例现在都在进行该调用。我还能怎么做？

以供参考：

我正在研究一组 Polymer 元素（在这种特殊情况下为按钮），其中一些应该重复使用相同的 HTML 片段。自定义按钮的结构如下：

风格和行为应有的作用。

问题是：我不确定如何在button-base.html不定义button-base为另一个元素然后将其用作<button-base></button-base>.

我想避免将其转换为新元素的原因是：

• 我希望 的内容button-base成为元素本地 DOM 的一等公民，custom-button以便行为中定义的所有方法仍然适用this.myMethod()于不导入的按钮，button-base而是使用自定义本地 DOM。
• 我需要能够在这个 new 上以声明方式设置属性，custom-button以便它们自动反映在 DOM 元素上button-base.html。

例如 的内容button-base.html如下：

我想以一种自动映射到的方式设置raised我，而无需通过新元素代理所有可能的属性（如果我定义为新元素并将其导入为in ）。custom-buttonpaper-buttonbase-button<base-button></base-button>custom-button

关于如何使这个导入工作的任何想法？

我在网上找不到任何东西。我正在使用 Polymer 1.6，并且正在尝试对元素进行延迟加载。到目前为止，我已经成功地延迟加载它们并且速度大大提高了。

我正在做 App Shell 架构，我在其中捆绑（通过缩小和硫化）导航栏和抽屉工作所需的所有脚本。但是，一旦我这样做了，就会有许多 HTML 导入是 App Shell 的一部分，它们将被调用，因为它们的名称不同。

我可以从我的元素中删除 HTML 导入，但这很容易出错。注意：我知道 HTML 导入只执行一次，但由于它们是包的一部分，浏览器不知道如何阻止它的加载。

所以我想做的是拦截 HTML 导入，检查元素是否是 App Shell 的一部分，如果它已经存在则阻止它的加载。

像这样的东西：

我还需要一种方法来使用其他浏览器，例如 Firefox。显然 Polymer 使用了一个调用 AJAX 的 polyfill。

我正在从cors启用的 cdn 加载我的所有项目资源，但是 html 导入在第一页加载时失败（然后在加载后成功）。

产生以下错误：

我搜索了几乎所有相关页面并尝试了一百万个解决方案，例如：

1. 在 s3 存储桶上添加 cors 标头，有人说范围解决了他们的问题，有人说暴露标头解决了他们的问题，我添加了所有并在它们之间切换，但同样的问题。

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://*</AllowedOrigin> <AllowedOrigin>https://*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <ExposeHeader>ETAG</ExposeHeader> <ExposeHeader>Accept-Ranges</ExposeHeader> <ExposeHeader>Content-Range</ExposeHeader> <ExposeHeader>Content-Encoding</ExposeHeader> <ExposeHeader>Content-Length</ExposeHeader> <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader> <AllowedHeader>range</AllowedHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

2. 在 cors 规范中，据说重复的 cors 标头会导致请求失败，所以我确保没有重复。

3. 在服务器上启用预检请求并包含所有必需的配置（允许的标头等）。

我有一个非常简单的项目：

我尝试将数据从父母传递给孩子，然后在 Polymer() 中获取它们：

索引.html

应用程序/parent.html

应用程序/child.html

问题在于，Polymerthis.__data__仅看到从主机传输的数据是否像上面一样隐式声明，在模板打开器标记旁边。如果我从那里删除它就看不到它。所以它看起来像一个把戏。我不想将该数据放在模板中，我想在Polymer函数中使用它。但我不知道如何正确地实现这一点，没有任何技巧的正确方法是什么。我相信有人知道。

我有一个带有一堆按钮（即主页、关于、..等）的横幅 html，我想将它们设置为模板。在我独特的页面（比如主页）上，我想“导入”这个模板 html 文件。我该如何编码？

我尝试了许多不同的方法并进行了查找，但我得到的最接近的是，当我导入时，它有那些滚动条并且并没有真正与页面“集成”。例如，我正在寻找的一个很好的例子是顶部横幅不变的 arduino 网站。

谢谢，

假设我有一个 html 页面 (assets.html)，上面有一些自定义元素，例如按钮。按钮由 html/css 和图像组成。

是否可以导入“assets.html”并“抓取”按钮并将其克隆/复制并将其放入访问 assets.html 的页面中？

我希望能够拥有一个包含大量界面组件的页面，能够加载该页面并从中获取我想要的任何组件。

可能吗？什么方法可以保证 css 和图像将与导入的 html 一起保留？

我记得在某处读到，如果将script标签添加到DOM使用appendChild它不会阻塞并且表现得好像它具有async属性。今天我正在阅读这篇文章，它有以下代码片段：

所以我想知道标签描述的行为是否与script标签相同link？为什么要async手动添加属性？

我正在使用自定义元素。其中很多（尤其是像 Polymer 这样的库）使用 HTML 导入来加载组件。

大多数元素涉及一些 CSS、一些 HTML 和一些脚本，这些可以是单独.css的 和.js/ .ts，通常在字符串（或 React/Preact.tsx文件）中嵌入 HTML。

使用 HTML 导入有一个更优雅的解决方案：

然后在my-component.html：

我可以在外部使用 TypeScript 和一个单独的.ts文件，但这有点乱。我想要做的是替换my-component.html-my-component.tshtml一个看起来几乎相同的文件，但它具有 TypeScript 而不是 Javascript，并且以与or文件.html完全相同的方式转换为版本。.ts.tsx

有没有办法做到这一点？