问题标签 [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 中的模板标签：querySelector 只返回空值
我也在制作一个用于教育目的的网站，但是我遇到了一些我自己无法弄清楚的错误。
我写了一个模板，如：
我使用 jquery 将该模板添加到使用模板追加的许多 div 中。
但它总是返回错误，tpl.querySelector(slt + '.panel-default .panel-heading #room-type').innerText = type;这Cannot set property innerText of null意味着在模板中找不到元素。
任何建议或推荐。请帮忙。非常感谢
html - 在另一个 html（即模板）中打开一个 html 文件
我有一个带有一堆按钮（即主页、关于、..等）的横幅 html，我想将它们设置为模板。在我独特的页面（比如主页）上，我想“导入”这个模板 html 文件。我该如何编码？
我尝试了许多不同的方法并进行了查找，但我得到的最接近的是，当我导入时，它有那些滚动条并且并没有真正与页面“集成”。例如，我正在寻找的一个很好的例子是顶部横幅不变的 arduino 网站。
谢谢，
javascript - 从外部文件导入单独的 html 资产
假设我有一个 html 页面 (assets.html)，上面有一些自定义元素，例如按钮。按钮由 html/css 和图像组成。
是否可以导入“assets.html”并“抓取”按钮并将其克隆/复制并将其放入访问 assets.html 的页面中？
我希望能够拥有一个包含大量界面组件的页面，能够加载该页面并从中获取我想要的任何组件。
可能吗？什么方法可以保证 css 和图像将与导入的 html 一起保留？
polymer - 聚合物模块中有多个插入点？
<content>在聚合物中，我们可以在这样的自定义模块中为 HTML 内容创建插入点。
然后像这样使用模块：
自定义元素可以支持多个基于这些<content>的插入点吗？如何？
html - 内部的“损坏”链接 tag
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
<template id="tmpl">
<div class="something">
&l
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
However, I've come to realise this means I have a broken link (example.com/pages/{{link}}) in my HTML. This is a concern, as various crawlers might consider it invalid (in fact, the Google Search Console reports my homepage as having a broken link).
Is it valid to use <template> this way?
Is it better to put it in something like <script type="text/template"> instead (as seen on the handlebars.js website)?
You defined the "talk" property value as an arrow function, which means that the value of this in that function will be whatever the value of this was in the context of the function's definition. That's not the "dog" object, it's whatever this is where that let statement appears.
If you use a regular function instead, your code will work as you expect:
Now, on top of the this problem, your "talk" function doesn't return anything, so passing the results of a call to the function will always return undefined. (In the arrow function version, there was could have been a return value had it been a single-statement brace-free function body, but it would also have been undefined because console.log() doesn't return anything.) So:
Now you'll see "Woff" from the console.log() in the function, and also from the outer console.log().
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
<template id="tmpl">
<div class="something">
&l
I've recently started using the <template> tag for HTML that I process afterwards using a template library, e.g.
However, I've come to realise this means I have a broken link (example.com/pages/{{link}}) in my HTML. This is a concern, as various crawlers might consider it invalid (in fact, the Google Search Console reports my homepage as having a broken link).
Is it valid to use <template> this way?
Is it better to put it in something like <script type="text/template"> instead (as seen on the handlebars.js website)?
You defined the "talk" property value as an arrow function, which means that the value of this in that function will be whatever the value of this was in the context of the function's definition. That's not the "dog" object, it's whatever this is where that let statement appears.
If you use a regular function instead, your code will work as you expect:
Now, on top of the this problem, your "talk" function doesn't return anything, so passing the results of a call to the function will always return undefined. (In the arrow function version, there was could have been a return value had it been a single-statement brace-free function body, but it would also have been undefined because console.log() doesn't return anything.) So:
Now you'll see "Woff" from the console.log() in the function, and also from the outer console.log().
javascript - 页面渲染上的自定义 html 标签由于某种原因跳过了 HTML 解析
我不知道为什么会这样，但如果真的有很多这样的元素，自定义 html 标签似乎无法在页面加载时正确解析它的内容。
这是一个例子
我的假设是存在某种堆栈，有时这个堆栈会溢出:)
您对如何解决它有任何想法吗？（我已经在 React Fiber 的引擎盖下寻找 .. 从那里获得调度）。
javascript - 重用导入的 Web 组件模板
我已经构建了一个 Web 组件（我是新手，而不是 Javascript 专家）并将其注入到 Shadow DOM 中。但是，我想在页面上多次使用这个模板。我发现组件的私有作用域被复用了，这不是我想要的。我想要一个组件的重复。
索引.html
这是模板初始化和脚本
我的模板.html
现在，当我单击输入字段时，总是会打开“data2”。这意味着当点击 data1 组件时，变量被 data2 init 覆盖:(
当我创建第二个 html 并将其注册为 my-template2.html 时，显然一切正常，但（显然）我不想要这个。
我怎样才能重复这个模板，使用它自己的初始化？甚至可能吗？
html - 如何在元素的内容中访问模板的 innerHTML
首先，我为标题血腥道歉。我努力用一句话来概括这个问题。
我有一个聚合物元素。在我的元素中，我希望显示（或简单地登录到控制台）作为元素实例（内容）的子元素的模板元素的 innerHTML。
（请注意，这里的目的是创建一个类似于 iron-demo-helpers 的 demo-snippet 的元素。）
考虑以下 Polymer 元素：
非常简单，我查询“模板”元素并记录其内部 HTML。
现在考虑以下用法：
正如预期的那样，这导致“Hello World”被记录到控制台。但是，我正在尝试在另一个 Polymer 元素中使用“print-contents-html”元素：
现在，如果我更新用法以包含 simple-demo 元素的实例：
我希望看到“Hello World”和“Hello World from simple demo”都记录到控制台。但是没有记录简单的演示消息。
看起来，虽然 queryDistributedElements() 确实返回了模板元素的实例，但 innerHTML 字段是一个空字符串。
有谁知道为什么会这样？访问内容/子模板元素没有设置其 innerHTML？
其次，有谁知道另一种方法，通过它我可以访问作为聚合物元素的内容/子元素的模板元素的 innerHTML？
亲切的问候，安德鲁·巴特勒
javascript - Javascript 未在 shadow DOM 内执行
我正在开发一个应用程序，我必须将其他 html 网页加载到当前页面。其他网页是独立的应用程序。我正在尝试在影子 DOM 中加载网页。为此，我使用了下面的代码，它将尝试在 shadowRoot 中导入 test-template.html。这里我没有使用模板标签，因为我必须动态渲染模板（使用 ajax）。
test-template.html 看起来像这样：
我可以在当前页面中加载提到的 test-template.html，但是 test-template.html 中的 javascript 没有执行。有没有办法让脚本运行？如果是，请分享运行示例。谢谢。
firefox - Firefox 在激活前请求 HTML5 模板内的内容
当我注意到 Firefox 正在请求在位于 HTML5 模板标签内的 img 的 src 属性中定义的 url 时，我正在使用 DevTools 调试我的 Web 应用程序，而 Chrome 则没有。
我正在使用最新版本（50.0）。
这是一个错误吗？
下面的例子：