问题标签 [html5-template]
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 - 在模板中导入 HTML 模板
有没有在另一个 HTML 模板元素中使用 HTML 模板元素的示例？
好的，这是一个简单的例子：
这是我的主文件index.html，我在其中导入header.html并克隆其中的模板并将其附加到我的主div：
然后在我的header.html中，我导入另一个 HTML 并将其添加到模板中（我觉得在另一个模板中调用 document 是错误的模板，但我可能是错的。）：
这是credit_field.html只是一个包含该字段的模板：
显然加载它没有任何错误，但它给了我导入错误！只是为了记录，如果我将它们都导入到我的 index.html 并将它们附加到那里，它会工作得很好，但我正在寻找一种在另一个模板中拥有模板的方法。
再次澄清我的问题，我想知道如何在另一个 HTML 模板元素中添加一个 HTML 模板元素？
注意：我见过有人使用 Django 模板，但我想在 HTML、JavaScript 和 jQuery 中对其进行排序以避免复杂性。
javascript - 当一切正常时，为什么 importNode 不执行？
我想使用 HTML 导入，所以我创建了两个文件。
文件1：
文件2：
当我执行 File2 时，我应该看到一个黄色方块，但我收到了这个错误：
Uncaught TypeError: Failed to execute 'importNode' on 'Document': parameter 1 is not of type 'Node'.
at Import.html:8
当我将“测试”变量记录到控制台时，我得到了包含 File1 的文档，所以那里没问题。我只是不明白错误应该是什么意思以及为什么它不起作用。
javascript - 使用 Routes 显示 Web 应用程序页面时，如何为模板标签添加 HTML 页面
我正在关注使用 Routes 连接所有页面的 Udemy 教程。但是，我需要向我的网络应用程序（具有验证等）添加一个表单。我找到了 aldeed:autoform 但它使用 HTML 模板标签。据我了解，我的 React 组件无法在 JSX 中正确渲染模板标签？基本上我需要添加的文本如下所示（取自 autoform 文档）：
是否可以从路由链接到 html 页面？这是我现在在我的 routes.js 中拥有的内容，我需要/submit能够呈现该模板表单：
我的问题有意义吗？我的默认 main.html 如下所示：
我的网络应用程序的整个主体都链接到路由（这是在我的 main.js 客户端中）：
javascript - 有没有办法使用 querySelector 来获得一个开放的影子 dom
假设我创建并插入了这样的元素
现在我想使用 aquerySelector来访问我的元素的开放阴影 dom。像这样：
但这不起作用。还有其他方法吗？
编辑以回应@Supersharp 的回答
对不起，我没有说清楚。我使用的 webpack
style-loader只接受它与 一起使用的 CSS 选择器document.querySelector，所以我要求的是我可以使用这种方式的 CSS 选择器。
javascript - 尝试在 html 导入中选择模板元素时获取 null
在我的应用程序中，我将 html 导入A到具有此文件的文件B中。但它警告null。如果我B直接在浏览器中打开，它会提醒模板 HTML dom 元素。这怎么会发生，同样的代码几乎来自谷歌自己的网络组件文档https://developers.google.com/web/fundamentals/architecture/building-components/customelements。
这是谷歌的例子：
谢谢
javascript - 如何从类中访问自定义元素的下一个兄弟？
在 Web 组件中，我有一个自定义元素，我想访问下一个兄弟元素。我怎样才能做到这一点？我有这个
但sibling变为空。
有没有人知道怎么做？
谢谢
javascript - 如何从链接的 javascript 文件中访问自定义元素？
如果我有这样的脚本
main.js如何从内部访问this与? 中等效的自定义元素constructor()？
谢谢
javascript - 在不调用 connectedCallback 的情况下交换“自定义元素”
我正在创建一个需要在列表中切换元素的选举应用程序。我有以下自定义元素 Web 组件。为简洁起见，我已经从类中删除了不相关的功能。
我有交换功能：
我使用以下模板来构建自定义元素：
由于我从 HTML 模板创建自定义元素，因此我需要在其中克隆模板connectedCallback()（因为在 v1 中不允许在构造函数中添加子元素）。这样做的结果是，当我将交换函数调用到列表中的“位置”时，它最终会重新克隆模板并将不必要的 DOM 元素添加到 Position 和 Candidate 元素中。
例如，交换后的结果应该是：
但它最终变得混乱：
有没有更好的方法来克隆 HTML 模板，这样我就不需要在connectedCallback? 如果没有，我怎样才能有效地交换而不带来所有额外的元素？请注意，我不想使用 jQuery，因为我想要一个轻量级的应用程序。
我已经看到了，但它不起作用，因为它最终调用了 connectedCallback 并插入了 如何在 JavaScript 中交换 DOM 子节点？
javascript - CustomElements V1 和 ShadowDOM 的外部样式
虽然这似乎是一个重复的问题，之前提出的问题是基于 Polymer，而不是原生 CustomElements，这是关于 css 本身，而不是穿透 ShadowDOM 或自定义 CSS 属性/变量
所以这里我们有一个简单的自定义元素（注意：在撰写本文时，这仅适用于较新的 Chrome 版本）
这很好地展示了在使用 ShadowDOM 时样式是如何隔离的。
最好将<style>内部的内容<template>存储在一个外部文件中，该文件可能由诸如 less 之类的预处理器生成。
经过大量搜索才找到与聚合物相关的答案，我画了一个空白，有什么想法吗？
我不是在寻找他们允许我使用的自定义属性
并使用设置颜色
我的问题是关于搬家
离开<style>标签并进入单独的文件