问题标签 [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 - 如何使用 vanilla js 在自包含的自定义元素中剔除模板？
我有一个自定义组件，它只显示一张塔罗牌。在自定义元素之前，我定义了一个模板。
在我的 wc 的 connectedCallback 中，我将模板本身附加到 shadowroot，然后通过在 shadowroot 中克隆它来将其标记出来。我这样做有两个原因：
- 我希望我的 wc 组件是一个独立的模块；因此，我想在与自定义元素相同的位置定义我的模板。
这似乎是删除我的模板以使其可用而不将其粘贴在所有者文档中的唯一方法。
/li>
这造成的问题是我在我的页面上使用的每个塔罗牌组件都有相同的模板是一个孩子，都具有相同的 id。既然他们在shadowroot中，这有关系吗？虽然闻起来很有趣...
我的目标只是试图了解 Web 组件规范如何组合在一起。我的问题是，有没有更好的方法可以将我的组件代码保持在一起并且不参考所有者文档？由于大多数浏览器供应商没有采用 html 导入，因此模板规范是否与自定义元素大多不兼容？
javascript - 火狐上shadowdomv1的兼容性
我正在尝试使用 ShadowDomv1（使用https://github.com/webcomponents/webcomponentsjs和https://github.com/webcomponents/shadycss），但它不起作用。
ShadowDom 本身可以工作，但 css 没有被封装（正如我们可以看到的h2css 规则）。
它在 Chrome 和 Safari 上按预期工作（但它们都支持 ShadowDomv1）。
我错过了什么还是不可能？
这里的jsbin：http ://jsbin.com/maqohoxowu/edit?html,output
和代码：
google-chrome - 在 shadow-dom 中提供样式的情况下，鼠标双击时的文本选择不起作用
哪些步骤将重现该问题：
(1)在chrome浏览器中运行以下代码
(2)尝试在“With Shadow dom”和“Without Shadow dom”两个部分中双击“Second”一词。
预期结果：应该选择“第二”这个词（因为它在第-2节中工作）
实际行为：双击不选择文本。
html - 为 HTML 片段声明 doctype 有意义吗？
如果我有一个 HTML5 组件/WebComponent 的component.html文件定义了 a ，那么在 中声明<template>是否有意义？也就是说，以下哪个是最佳实践？<!DOCTYPE html>component.html
或者
javascript - 未捕获的 TypeError：tplContent.importNode 不是函数
我正在阅读“Web Components mit Polymer”一书并尝试了书中的以下代码：
但是我只是在第二个 JS 行中停止了错误：
未捕获的 TypeError：tplContent.importNode 不是函数
我在 Ubuntu 上使用 Google Chrome 版本 63.0.3239.84。有人可以帮我处理这个订单吗？
问候， 阿图尔
web-component - Web 组件和影子根
我使用以下代码创建了一个 Web 组件，其中我使用了模板：
但是在控制台的影子根目录中，我看到了这个不一样的内容：
javascript - 浏览器如何处理 tag VS a tag
I have been reading the documentation on the <template> tag, and I can't seem to understand how it is different from simply using a <div> that is display: n
I have been reading the documentation on the <template> tag, and I can't seem to understand how it is different from simply using a <div> that is display: none;
Documentation: template tag
<template> example
VS
<div> example
- On a low level, how does the browser handle these 2 examples differently?
- Are certain JS methods or HTML attributes different or not available?
PS: I am aware of browser compatibility differences
How to get pixel color from canvas with background-color gradient?
I have canvas element with background color linear gradient. I want to get clicked pixel color, but every time I got [0, 0, 0, 0].
Then I've tried to get color of first pixel, but no luck.. What is wrong with that code?
0
投票
2
回答
1488
浏览
vue.js - 如何在 Vue 根实例中使用模板标签
我正在使用 Vue 增强 Web 应用程序中的页面。过去我编写了单个文件组件，并且发现使用<template>标记在文件顶部定义 html 模板很方便。
定义 Vue 根实例时有没有办法使用这个标签？还是我需要在 Vue 选项对象的模板属性中放入一个字符串？
0
投票
1
回答
503
浏览
javascript - HTML 导入不起作用...即使它受支持
我现在有点迷路了。我正在尝试使用自定义元素、模板、导入等的 Web 组件规范。但由于某种原因，导入规范不起作用！Chrome 似乎没有在源代码部分加载我的导入，即使它在我的版本 (67) 中受支持，所有代码都是正确的，路径名也是正确的。谁能帮帮我？这是我的项目：链接到 github 项目
如果您打开“index.html”，您可以看到我有一个指向 html 文件的链接标记。在该文件中，我使用模板标记并将其内容附加到我创建的自定义元素的 shadowDOM 中。如果我手动将代码复制并粘贴到主 html 文件的正文中，它可以工作，但是当我尝试导入它时不会加载。任何输入将不胜感激，谢谢！
I have been reading the documentation on the I have been reading the documentation on the Documentation: template tag VS
PS: I am aware of browser compatibility differences I have <template> tag, and I can't seem to understand how it is different from simply using a <div> that is display: n
<template> tag, and I can't seem to understand how it is different from simply using a <div> that is display: none;<template> example<div> example
How to get pixel color from canvas with background-color gradient?
canvas element with background color linear gradient. I want to get clicked pixel color, but every time I got [0, 0, 0, 0].
Then I've tried to get color of first pixel, but no luck.. What is wrong with that code?
vue.js - 如何在 Vue 根实例中使用模板标签
我正在使用 Vue 增强 Web 应用程序中的页面。过去我编写了单个文件组件，并且发现使用<template>标记在文件顶部定义 html 模板很方便。
定义 Vue 根实例时有没有办法使用这个标签？还是我需要在 Vue 选项对象的模板属性中放入一个字符串？
javascript - HTML 导入不起作用...即使它受支持
我现在有点迷路了。我正在尝试使用自定义元素、模板、导入等的 Web 组件规范。但由于某种原因，导入规范不起作用！Chrome 似乎没有在源代码部分加载我的导入，即使它在我的版本 (67) 中受支持，所有代码都是正确的，路径名也是正确的。谁能帮帮我？这是我的项目：链接到 github 项目
如果您打开“index.html”，您可以看到我有一个指向 html 文件的链接标记。在该文件中，我使用模板标记并将其内容附加到我创建的自定义元素的 shadowDOM 中。如果我手动将代码复制并粘贴到主 html 文件的正文中，它可以工作，但是当我尝试导入它时不会加载。任何输入将不胜感激，谢谢！