标签: html5-template
什么是:: content/:: slotted伪元素,它是如何工作的？
这对谷歌来说是不可能的,因为每篇关于:before和:after伪元素的文章似乎都使用了"内容"这个词.
我在这篇 CSS-Tricks文章中听说过它,解释了如何将图像滑块实现为Web组件的示例用例.它出现在里面的代码示例是:
CSS
#slides ::content img {
width: 25%;
float: left;
}
HTML
<template>
...
<div class="inner">
<content select="img"></content>
</div>
</template>
它似乎是指这个<content>标签,用于允许用户包含Web组件,但我想更深入地理解这一点.
编辑:
在进一步阅读之后,在上述文章中,我发现了一个链接作者的"Shadow DOM CSS Cheatsheet",其中包含一段解释::content伪元素的内容:
选择元素内的分布式节点.需要与不支持本机选择器的浏览器的polyfill-next-selector配对.
::content h1 {
color: red;
}
资料来源:http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/
这很有帮助,但我仍然发现整个事件相当不透明.还有其他见解吗？
推荐指数
解决办法
查看次数
HTML模板JavaScript polyfill
我正在寻找最符合标准/面向未来的前端HTML模板方法.
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
有没有人知道是否已经存在任何好的JavaScript polyfill使 <template>元素可以跨浏览器方式使用？最好符合本标准.
难点
根据HTML5Rocks指南,这些模板具有以下属性:
- "它的内容在激活之前是有效的惰性"
- "脚本无法运行,图像无法加载,音频无法播放"
- "内容被认为不在文件中"
- "模板可放置在任何地方内的
<head>,<body>或<frameset>"
我认为用JavaScript polyfill纯粹实现所有这四个属性是不可能的,因此任何解决方案都只是部分解决方案.
推荐指数
解决办法
查看次数
html模板标签和jquery
我有这种情况,我正在尝试<template>在我的html源代码中使用该标记:
<template id="some-id">
<div id="content-container">
<span>{{some_string}}</span>
<div>
</template>
这最终将模板放在文档中,但不认为它在DOM中.这意味着在支持模板标记的浏览器中找不到$("#content-container").如果我搜索:
$("#some-id")
我得到了回报:
<template id=?"some-id">?
#document-fragment
<div id="content-container">
<span>{{some_string}}</span>
<div>
</template>?
这些都不会让我感到惊讶.我需要知道的是克隆文档片段的内容并拥有一个新节点,然后我可以将其放在我想要的DOM中.
我已经找到了如何使用jQuery实现这一点的示例,但是围绕这些内容的大部分代码已经在使用jQuery,我需要知道如何使用jQuery来执行此操作.
我的第一个想法是获取html,然后使用它来创建一个新节点:
stuff = $("#some-id").html()
new_node = $(stuff)
这会导致以下错误:
Error: Syntax error, unrecognized expression: <the html string>
我不知道错误是否是由胡子语法引起的.我认为必须有一个jQuery解决方案来解决这个问题,但是当我用Google搜索时,我得到了jQuery模板的大量命中,这是不同的.
有没有人有想法,答案或指向网站/页面的指针,可以帮助我完成这项工作？我试图避免拼凑一些hackish.
编辑:我最终找到了这个解决方案(我还在测试它,以确保它是一个解决方案,但它看起来很有希望);
template = $("#some-id")
content = template.html()
new_div = $("<div></div>")
new_div.html(content)
我最终得到了我以前不需要的div,但我可以忍受.但这种感觉很糟糕.有没有人有更好的方法呢？好处是它仍然可以在尚未完全适应模板标签行为的浏览器中运行.
谢谢!
推荐指数
解决办法
查看次数
HTML5模板无法在Internet Explorer上运行,如何解决？
我在HTML5中制作了一个模板,该模板与Chrome和Firefox一起使用,但没有使用Internet Explorer(在IE 8上测试过).
我怎么解决这个问题？
推荐指数
解决办法
查看次数
如何从模板中使用shadow DOM装饰的HTML元素中删除阴影根？[网站组件]
我在Chrome Canary(33.0.1712.3)中探索导入,模板,影子DOM和自定义元素.在网格布局中,我有一个特定的内容元素(显示区域),它将显示从文件导入的不同Web组件或克隆的轻型DOM片段.但是,一旦添加了阴影DOM,我就无法重新显示普通的HTML DOM,因为我不知道如何删除阴影根.一旦创建,阴影根就会保留并干扰普通DOM的呈现.(我已经查看了各种W3C规范,例如Web组件介绍,影子DOM,模板,Bidelman关于HTML5 Rocks的文章等).我在下面的一个简单示例中找到了问题:
点击"show plain old div"; 点击"显示阴影模板"; 点击"show plain old div".每次点击后检查devtools.第三次点击后,按钮下面没有输出,在我看到的devtools中:
<div id="content">
#document-fragment
<div id="plaindiv">Plain old div</div>
</div>
我需要添加什么来removeShadow()来删除阴影根并完全将内容元素重置为其初始状态？
removing_shadows.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<template id="shadowedTemplateComponent">
<style>
div { background: lightgray; }
#t { color: red; }
</style>
<div id="t">template</div>
<script>console.log("Activated the shadowed template component.");</script>
</template>
<template id="plainDiv">
<div id="plaindiv">Plain old div</div>
</template>
</head>
<body>
<div>
<input type="button" value="show plain old div" onclick="showPlainOldDiv()"/>
<input type="button" value="show shadowed template" onclick="showShadowTemplate()"/>
<div id="content"></div>
</div> …推荐指数
解决办法
查看次数
如何创建一个像表单元素一样的Web组件？
我正在尝试创建一个特定于表单元素中可用的Web组件,它具有a name和a value.我承认,我可以创建一个Web组件,它extends的HTMLInputElement:
<input is="very-extended">
但我正在努力创造一个全新的元素.
创建常规Web组件时,可以从regular HTMLElement(HTMLElement.prototype)的原型创建它.这让我想到我可以用HTMLInputElement(HTMLInputElement.prototype)的原型创建一个不同的元素.您实际上extending在输入元素的API 时使用该原型,那么为什么我不能使用该原型来创建一个在表单中工作的全新元素？
如果你看一下常规输入字段的阴影dom:
你可以看到里面有一个div.我知道这HTMLInputElement有方法和属性,getter/setter等等.那么为什么当我尝试创建我的组件时,它不能成为表单中找到的名称,值对的一部分？
以下是我尝试创建此Web组件的示例:
请注意,他应该在支持Web组件的浏览器中进行测试.
(function() {
var iconDoc = (document._currentScript || document.currentScript).ownerDocument;
var objectPrototype = Object.create(HTMLInputElement.prototype);
Object.defineProperty(objectPrototype, 'name', {
writable: true
});
Object.defineProperty(objectPrototype, 'value', {
writable: true
});
objectPrototype.createdCallback = function() {
var shadow = this.createShadowRoot();
var template = iconDoc.querySelector('#test');
shadow.appendChild(template.content.cloneNode(true));
};
document.registerElement('custom-input', {
prototype: objectPrototype
});
})();
console.log(
$('form').serialize()
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<template …javascript forms web-component html5-template custom-element
推荐指数
解决办法
查看次数
嵌套元素(Web组件)无法获取其模板
我使用带有两个自定义元素(v1)的Web组件做了一个简单的例子,其中一个嵌套在另一个元素中.index.html的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="app-container.html">
</head>
<body>
<app-container></app-container>
</body>
</html>
APP-container.html:
<link rel="import" href="toolbar.html">
<template id="app-container">
<app-toolbar></app-toolbar>
</template>
<script>
customElements.define('app-container', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = document.currentScript.ownerDocument.querySelector('#app-container').content;
shadowRoot.appendChild(content.cloneNode(true));
}
});
</script>
toolbar.html:
<template id="app-toolbar">
<p>Ok!</p>
</template>
<script>
customElements.define('app-toolbar', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = document.currentScript.ownerDocument.querySelector('#app-toolbar').content; …javascript web-component shadow-dom html5-template html-imports
推荐指数
解决办法
查看次数
<template>标记内的"Broken"链接
我最近开始使用<template>我之后使用模板库处理的HTML标记,例如
<template id="tmpl">
<div class="something">
<a href="/pages/{{link}}">{{title}}</a>
</div>
</template>
...
<script>
var output = Mustache.render($('#tmpl').html(), {
link: 'abc',
title: 'abc'
});
</script>
但是,我已经意识到这意味着我的HTML中有一个断开的链接(example.com/pages/{{link}}).这是一个问题,因为各种抓取工具可能会认为它无效(实际上,Google Search Console会将我的主页报告为链接断开).
使用
<template>这种方式有效吗？把它放在类似的东西
<script type="text/template">(如handlebars.js网站上看到的)更好吗？
推荐指数
解决办法
查看次数
在模板文字中设置 HTML Button`onclick`
我有一个 html 模板，我正在使用模板文字。该函数如下所示
// postCreator.js
export const blogPostMaker = ({ title, content, address, id }, deletePost) => {
const innerHtml = `
<blog-post>
<h1 class='title'>${title}</h1>
<p class='content'>${content}</p>
<p class='address'>${address}</p>
<button onclick='${() => deletePost(id)}'>Delete</button>
</blog-post>
`
return innerHtml
}
//Blog.js
postHelper.getSeriesOfPosts(10)
.then(resp => {
resp.forEach(post => (blogDiv.innerHTML += blogPostMaker(post, postHelper.deletePost)))
})
我无法弄清楚的是如何让 onclick 工作。我试过将 anon 函数传递Blog.js给 thepostCreator也没有运气。
有任何想法吗？
推荐指数
解决办法
查看次数
HTML模板元素：澄清
我最近发现了HTML template元素，希望对它进行一些澄清。
据我所知，这三个主要特征是：
template没有呈现在屏幕上template没有进入DOM- 在及其内容
content之间还有一个虚拟属性template
除了这些之外，a <template>可能还被div隐藏在屏幕和DOM中。在这方面，用于利用的JavaScript template与尝试使用伪造JavaScript的JavaScript 相同div。
问题是，这正确吗？我问是因为：
- 我只需要自己想清楚
- 为不支持的浏览器伪造一个相对容易。
谢谢
推荐指数
解决办法
查看次数
标签 统计
html5-template ×10
html ×5
javascript ×5
html5 ×4
shadow-dom ×3
css ×1
forms ×1
html-imports ×1
jquery ×1
polyfills ×1
tags ×1
templates ×1
templatetag ×1
w3c ×1