问题标签 [html-imports]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Webcomponents Polyfill不起作用
我正在尝试按照https://www.webcomponents.org/polyfills/中的说明填充 webcomponents，因为我希望我的示例应用程序可以在 Chrome 和 Firefox 上运行。但是我收到ReferenceError: customElements is not defined在 Firefox 中的错误。在 index.html 上查看我的代码
我错过了什么？
PS：在 Chrome 中一切正常（有/没有 polyfill）
javascript - 使用 Polyfill 附加的 ShadowRoot 不可查询
在下面的示例中，我尝试创建一个菜单组件来试验组件层次结构。
索引.html
/components/global/site-navigation.html
/components/global/nav-item.html
它在 Chrome 中运行良好。我已经应用了 Polyfill以使其在其他浏览器中工作。但是，Initialize 方法在 FireFox 中失败，并显示消息TypeError: this.DOM.querySelector(...) is null。调试发现this.DOM = this.attachShadow({ mode: 'open' });FF和Chrome返回的对象类型不同，FF结果中没有querySelector！我该如何解决这个问题？
更新： 如果删除了对子组件（导航项）的链接/引用，则父组件（站点导航）工作正常。
html - 为 HTML 片段声明 doctype 有意义吗？
如果我有一个 HTML5 组件/WebComponent 的component.html文件定义了 a ，那么在 中声明<template>是否有意义？也就是说，以下哪个是最佳实践？<!DOCTYPE html>component.html
或者
es6-modules - Polymer - 如何从 HTML 导入缓慢迁移到 ES6 模块？
正如Polymer-Summit 2017中所说，Polymer 3.0 中的 Web 组件不会使用 HTML 导入，而是使用 ES6 模块导入。
所以我正在寻找一种方法来将我所有的 HTML 导入一个一个地更改为 ES6 模块import，而不会产生不稳定的代码。
例如：
这是一个简单的项目。
他们是3个文件：
index.html导入组件并在custom-elementDOM 中实例化一个。导入，并使用它
的功能。
所有导入都是使用 HTML-imports 进行的。
我试图弄清楚如何只制作一个 ES6 模块，然后将其导入文件而不破坏应用程序。custom-element.htmlMyModule.htmlsquare(number)MyModulecustom-element.html
javascript - 未捕获的 TypeError：tplContent.importNode 不是函数
我正在阅读“Web Components mit Polymer”一书并尝试了书中的以下代码：
但是我只是在第二个 JS 行中停止了错误：
未捕获的 TypeError：tplContent.importNode 不是函数
我在 Ubuntu 上使用 Google Chrome 版本 63.0.3239.84。有人可以帮我处理这个订单吗？
问候， 阿图尔
meteor - Polymer 不是函数：部署 Meteor / Blaze / Polymer 2 应用程序的麻烦
在过去的 5-6 天里，我将一个相对较大的遗留 Polymer 0.5 应用程序迁移到了 Polymer 2，这可不是小菜一碟。
一切在当地都很成功。当使用新版本在线部署时，我得到了一个新的惊喜，应用程序的 UI 坏了，控制台充满了这种类型的消息：
而这样的例子不胜枚举。这种类型的代码会发生“Polymer is not a function”类型的错误：
我首先无法理解的是开发环境和生产环境之间的差异从何而来。在“网络”选项卡中，我可以看到所有供应商 Web 组件都以相同的顺序加载，并且没有请求失败。它只是在 prod 中不起作用，这使得调试变得复杂。
这是一个 Meteor 应用程序，带有 Blaze 和 Polymer（我知道那是一种糟糕的鸡尾酒）。
代码大致如下所示：
imports.html（简化）
app.html（应用程序根视图，简化）
<template>小胡子标签是 Blaze 的东西。
您会注意到我没有<body>，<html>或其他包含（用于 Meteor 等），这实际上是我的应用程序的唯一引导代码。我无法控制这一点。Meteor 检测<head>并注入它，但自己创建其余部分，插入其样式表等。我自己无法创建它。我知道这很愚蠢。我也不喜欢 Meteor 或 Blaze。
我知道 Polymer 建议将应用程序根目录放在<dom-module>另一个 HTML 文件中，加载 HTML 导入等，但我什至不能这样做（感谢 Meteor），我也不能重写整个应用程序（虽然我想）。
有解决方法吗？我的意思是，它正在开发中。什么可能导致这种情况？它发生在所有浏览器中。
cookies - 无法通过 webRequest 为 HTML 导入请求添加 Cookie 标头
我正在扩展中开发一项功能，该功能允许用户用远程资源覆盖一些本地资源。
为此，我们使用webRequest将选定的请求重定向到远程位置。这很好用，可以在这些上正确发送 Cookie，然后可以加载远程资源（需要身份验证）。
不起作用的棘手部分是当所述资源包含 HTML 导入时。
Chrome 将解析这些导入并发送请求以获取导入的资源，但在这种情况下，它不会发送 Cookie 标头。所以我曾经webRequest.onBeforeSendHeaders添加它（无论如何都需要在 Firefox 中）。
在这种情况下，Chrome 不会像我认为的那样发送 Cookie 标头。
有人知道这是否是预期/标准的，还是可能是 Chrome 中的错误？或者也许有解决方法？
编辑：HTML 导入规范指定 HTML 导入应以 CORS模式获取。same-origin这意味着它不应该发送凭据。Chrome 似乎尊重这里。
现在的问题是：那么应该允许扩展添加 cookie 标头吗？Firefox 似乎允许这样做（我可以添加缺少的 cookie 标头）。
EDIT2：我已经挖掘了铬问题，发现核心开发团队正在考虑放宽一些扩展的安全功能，其中可能包括这种情况。所以我在那里打开了一个问题
javascript - 如何在另一个应用程序中访问实际反应渲染的 DOM？
我有一个用例，我需要在另一个应用程序中呈现反应应用程序（管理员应用程序案例中的用户应用程序预览，如场景）。这两个应用程序来自相同的来源，但不同的存储库和不同的技术。我也不需要 javascript 函数，只有 HTML 和 CSS 就足够了
我尝试使用html 导入，例如
和这样的 iframe
在访问时两者都给了我相同类型的 DOM 输出
尽管使用 iframe 在 iframe 中正确呈现，但唯一的问题是我无法访问 DOM。
我理解它，因为反应应用程序总是在客户端呈现，但我想获得呈现的 DOM。那么我怎样才能访问实际呈现的 DOM？
甚至我注意到浏览器中的页面源也不提供渲染的 DOM？为什么它不显示渲染的 DOM？
javascript - 包含外部 HTML 的 JavaScript 在 Chrome 中有效，但在 Internet Explorer 和 Firefox 中无效
我用来导入外部 HTML 的脚本具有基于 Bootstrap 的导航栏，这里是 Javascript：
在我的 HTML 页面中，我所做的只是在部分中包含对外部 html 文件的引用，并在我的部分中添加一个定义类名的 div，如下所示：
javascript - 什么是让我的 HTML 导入不仅仅在 Chrome 上工作的最佳方法？
我在 Bubble.is 中有一个完整的应用程序，它涉及患者通过视频聊天与临床医生预约。如果可能的话，我想避免只为视频聊天片段构建客户端-服务器设置。这就是为什么 OpenTok 的嵌入对我来说很突出。无论 Bubble.is 添加到标题中，当我直接嵌入它时，它都会破坏 OpenTok 的嵌入文件。因此，相反，我从我拥有的另一个域的 html 文件中提供 OpenTok 嵌入。所以现在我有了应用程序 (app.foo.bar) 和嵌入的 OpenTok (www.foo.bar/opentok.html)，并且正在尝试使用 HTML 导入。
嵌入式代码（标题）：
嵌入式代码（正文）：
正如预期的那样，这在 Chrome 桌面上运行良好，但在其他任何地方都没有。我可以采取哪些最佳方法来修改此现有代码，以便我可以（至少）在移动网络上运行它？