问题标签 [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.
twitter-bootstrap - 使用带有模板标签的引导程序
我一直在学习普通版的 Web 组件，但遇到了障碍。当尝试使用模板标签内的引导程序中的网格时，特别是容器类，它不会对其应用任何引导程序样式。
一般的 Bootstrap 样式（字体、样式重置等）正在正确应用，并且没有出现控制台错误。
我试图将引导程序的链接和脚本文件放在模板文件中（但在模板标签之外，因为链接标签不会在模板标签中呈现）。Bootstrap 将像我在索引页面上调用它一样加载，但容器仍然不会从 Bootstrap 继承任何样式。
非常感谢您提供的任何帮助！
javascript - 嵌套 HTML5 tags
Is there a way to nest HTML5 < template > tags inside each other?
Looking for an easy way to update my page with universal code so that every page does not require a lot of JS to function.
Fo
Is there a way to nest HTML5 < template > tags inside each other?
Looking for an easy way to update my page with universal code so that every page does not require a lot of JS to function.
For instance the following code:
JS file:
});
JSON file:
This problem is confirmed fixed in the Tomcat 7.0.56 changelog.
See this question for more info: Tomcat 7 Annotation scanner and JDK 8 with -parameters compiler flag exceptions
Javassist 3.19.0 used java8 compiler argument -parameters
Is there a way to nest HTML5 < template > tags inside each other?
Looking for an easy way to update my page with universal code so that every page does not require a lot of JS to function.
Fo
Is there a way to nest HTML5 < template > tags inside each other?
Looking for an easy way to update my page with universal code so that every page does not require a lot of JS to function.
For instance the following code:
JS file:
});
JSON file:
This problem is confirmed fixed in the Tomcat 7.0.56 changelog.
See this question for more info: Tomcat 7 Annotation scanner and JDK 8 with -parameters compiler flag exceptions
Javassist 3.19.0 used java8 compiler argument -parameters
css-selectors - + querySelector using :scope pseudo class works with document but not documentFragment
Depending on the content of a <template>, I want to wrap its contents in a container for easier/consistent traversal. If
Depending on the content of a <template>, I want to wrap its contents in a container for easier/consistent traversal. If the contents are <style> and <one-other-element> at the top level, I'll leave it be. Otherwise, whatever's in there will get wrapped in a <div>.
Originally I made my code something like this:
But, I noticed it wasn't working -- that is, hasCtnr was always false. So, I made a reduced test case (jsfiddle). As you can see, :scope works with regular DOM elements. However, it doesn't seem to work with DocumentFragments. I know the technology is new/experimental but is this a bug or am I doing something wrong?
If I use jQuery, it works... but my guess is because jQuery is doing something manually.
I only care about Chrome/Electron support, by the way.
Here's the jsfiddle inline:
Suppose we have a query like:
So if we need to export this data into a csv file then using below query we can do:
Depending on the content of a <template>, I want to wrap its contents in a container for easier/consistent traversal. If
Depending on the content of a <template>, I want to wrap its contents in a container for easier/consistent traversal. If the contents are <style> and <one-other-element> at the top level, I'll leave it be. Otherwise, whatever's in there will get wrapped in a <div>.
Originally I made my code something like this:
But, I noticed it wasn't working -- that is, hasCtnr was always false. So, I made a reduced test case (jsfiddle). As you can see, :scope works with regular DOM elements. However, it doesn't seem to work with DocumentFragments. I know the technology is new/experimental but is this a bug or am I doing something wrong?
If I use jQuery, it works... but my guess is because jQuery is doing something manually.
I only care about Chrome/Electron support, by the way.
Here's the jsfiddle inline:
Suppose we have a query like:
So if we need to export this data into a csv file then using below query we can do:
javascript - 在添加类...的情况下，CSS 3 转换是否不适用于模板元素 (HTML 5)？
在添加类的情况下，Transition 是否不适用于模板元素 (HTML5)...？？
我正在使用 HTML 5 模板通过 javascript 将新子元素添加到根元素。为了获得良好的视觉效果，我使用了一些 CSS 过渡。通常，CSS 的所有转换都可以正常工作，但我无法通过从 HTML 5 模板添加新元素来实现
有人可以帮我吗
我的代码很简单
预先感谢
javascript - 如何在 IE 中使模板标签无效？
我已经看到有一些 polyfill 可以复制<template>Internet Explorer 中 html5 元素的使用，但它们似乎都是脚本，最终只会在激活之前隐藏模板标签。不幸的是，这并不能阻止 IE 呈现模板的内容。例如：
在 IE 中，即使没有将模板内容附加到 document.body，也会显示警报。我知道示例代码并不完全适合 IE，因为模板标签没有content属性，但是将该属性添加到元素并不会停止警报脚本的运行。
有什么方法可以使模板标签的内容对 IE 完全惰性，还是我只需要等到模板元素正确实现边缘？
更新（09/02/15）：
正如 minitech 在评论中所说，似乎没有办法使标签的内容在 ie 中完全惰性。作为替代方案，我正在研究通过修改标签来抑制在解析时将执行的任何代码。感觉就像一个丑陋的黑客，但它现在似乎工作。我在这里找到了原始的 polyfill：http: //jsfiddle.net/brianblakely/h3EmY/
标记：
脚本：
CSS：
那么有人能告诉我为什么我会愚蠢地使用这种方法来禁止在ie中的模板标签中加载脚本吗？谁能告诉我这样做的更好方法？
这是我的jsfiddle。
javascript - 将模板标签的内容作为字符串返回
我想知道是否有办法获取模板标签中元素的内容并将其作为字符串返回？目前，它似乎正在返回一些内容，[object document fragment]但只想要里面的 html 内容。
javascript - 可以在类似于 css 的 html 文件中包含“模板”吗？
使用 html templates。在代码方面，很难为每个 html 文件保留正确的模板集。
是否可以有一个模板文件，就像一个文件一样css，包含在文件的head部分中html？
例如，为了补充 中的style部分head，可以链接到样式表，例如，
我的应用程序使用了几个templates. 可以像样式表一样处理它们，即链接到单独的文件中，还是每个template定义都需要直接成为原始html文件的一部分？
javascript - HTML 规范在哪里声明's contents are inert?
The template element is used to declare fragments of HTML that can be cloned an
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script. The "contents of the template" (as accessed via HTMLTemplateElement.prototype.content) are stored in a DocumentFragment associated with a different Document other than the main document.
So, because templ.content.ownerDocument != document, this is OK:
templ.content is an inert DocumentFragment, that's fine.
Edit: The rest of the question, below, has an incorrect premise -- I was testing this by creating a template in JavaScript with document.createElement instead of via HTML, which yields different results. More precisely, when creating a template and using document.body.appendChild, the template is adopted into document which specifically adopts template.content into document.
However, the template itself, and its descendants, are
associated with document:
In other words, the script is still a part of the main Document,
which would normally mean it executes.
While the spec explains the DocumentFragment accessed via
.content, that doesn't account for this concrete, instantiated
<script> instance having its associated Document be the main
document but not executing.
Does the spec explain somewhere exactly why this <script> isn't
executed? How is it excluded from execution if it does belong to
document?
(I realize it's useful for the script not to execute. This is a
question about the spec, not about the usefulness of <template> or
whether the in-browser behavior is appropriate.)
Well, there's this note on the template element description:
Note: Templates provide a method for declaring inert DOM subtrees and manipulating them to instantiate document fragments with identical contents.
(My emphasis.) It then goes into it in a fair bit of detail in the following paragraphs (my emphasis):
A Document doc's appropriate template contents owner document is the Document returned by the following algorithm:
If doc is not a Document created by this algorithm, run these substeps:
If doc does not yet have an associated inert template document then run these substeps:
Let new doc be a new Document (that does not have a browsing context). This is "a Document created by this algorithm" for the purposes of the step above.
If doc is an HTML document, mark new doc as an HTML document also.
Let doc's associated inert template document be new doc.
Set doc to doc's associated inert template document.
Return doc
The template element is used to declare fragments of HTML that can be cloned an
The template element is used to declare fragments of HTML that can be cloned and inserted in the document by script. The "contents of the template" (as accessed via HTMLTemplateElement.prototype.content) are stored in a DocumentFragment associated with a different Document other than the main document.
So, because templ.content.ownerDocument != document, this is OK:
templ.content is an inert DocumentFragment, that's fine.
Edit: The rest of the question, below, has an incorrect premise -- I was testing this by creating a template in JavaScript with document.createElement instead of via HTML, which yields different results. More precisely, when creating a template and using document.body.appendChild, the template is adopted into document which specifically adopts template.content into document.
However, the
templateitself, and its descendants, are associated withdocument:In other words, the
scriptis still a part of the mainDocument, which would normally mean it executes.While the spec explains the
DocumentFragmentaccessed via.content, that doesn't account for this concrete, instantiated<script>instance having its associatedDocumentbe the maindocumentbut not executing.Does the spec explain somewhere exactly why this
<script>isn't executed? How is it excluded from execution if it does belong todocument?
(I realize it's useful for the script not to execute. This is a question about the spec, not about the usefulness of
<template>or whether the in-browser behavior is appropriate.)
Well, there's this note on the template element description:
Note: Templates provide a method for declaring inert DOM subtrees and manipulating them to instantiate document fragments with identical contents.
(My emphasis.) It then goes into it in a fair bit of detail in the following paragraphs (my emphasis):
A Document doc's appropriate template contents owner document is the Document returned by the following algorithm:
If doc is not a Document created by this algorithm, run these substeps:
If doc does not yet have an associated inert template document then run these substeps:
Let new doc be a new Document (that does not have a browsing context). This is "a Document created by this algorithm" for the purposes of the step above.
If doc is an HTML document, mark new doc as an HTML document also.
Let doc's associated inert template document be new doc.
Set doc to doc's associated inert template document.
Return doc
javascript - appendChild 上的 html5 模板内容（文档片段）加载顺序
考虑下面的代码 -->
现在将其附加到 DOM
在控制台中给出这个输出 -->
所以一般的问题是-->
如何正确加载到 DOM，一个<template> 具有外部脚本（如本例中的 jQuery）的 html，后跟一个对其有一定依赖性的内联脚本。
另外 - 如果模板标签被删除，这不会发生 ->
在后一种情况下，浏览器如何同步下载它？
在前一种情况下（使用模板）是否可以阻止脚本下载（逐行）？