我最近发现了HTML template元素，希望对它进行一些澄清。
据我所知，这三个主要特征是：
template 没有呈现在屏幕上template 没有进入DOMcontent之间还有一个虚拟属性template除了这些之外，a <template>可能还被div隐藏在屏幕和DOM中。在这方面，用于利用的JavaScript template与尝试使用伪造JavaScript的JavaScript 相同div。
问题是，这正确吗？我问是因为：
谢谢
使用 Chrome API chrome.storage.local，我可以保存并成功检索数组，但无法检索 Map 对象。
var folders = new Map()
//... populate Map
chrome.storage.local.set( { "myFolders": folders } )
chrome.storage.local.get( "myFolders", function ( saved )
{
console.assert( typeof saved.myFolders.size === 'number', "not a Map!" )
} )
我被迫在存储之前转换数组中的 Map 。我可以直接存储 Map 对象吗？
HTMLImports.whenReady 和之间有什么区别window.addEventListener('WebComponentsReady', function(e) {？
“要在您的主HTML文档中定义元素，请从HTMLImports.whenReady（callback）定义该元素。当文档中的所有导入均已完成加载时，将调用回调。”
在本机导入下，主文档中的标签会阻止加载导入。这是为了确保导入已加载，并且其中的所有注册元素都已升级。这种本机行为很难进行polyfill，因此“ HTML导入” polyfill不会尝试。而是WebComponentsReady事件是此行为的代表：
两者有什么区别？
javascript web-component polymer custom-element html-imports
我正在探索Web组件自定义HTML元素,我遇到了向自定义元素添加自定义属性的问题:我在标记中设置的任何值都不会受到尊重.对于像这样的简单元素,它应该显示"flagtext"属性中提供的文本,它总是显示默认值.
<test-flag flagtext="my text"></test-flag>
完整的JSBin示例在这里.
JSBin使用Polymer库(因为这是我唯一可以使用的).我一般使用webcomponents.js,结果相同.Chrome 49和Firefox 45都有相同的结果.控制台或调试器中没有显示错误.
我在网上找到的每个样本都有类似的代码,但我尝试了各种版本,它总是拒绝更新.我甚至将一些样本复制到JSBin中,但它们也没有用.
可能有什么不对？我知道这是实验性技术,但这种不一致的一致性仍然令人惊讶.这个标准被废弃了吗？(我看到最新的2016年4月W3C自定义元素草案已完全改变了它的方法.)
当我定义"attributeChangedCallback"函数时,它不会触发.我可以通过Javascript轻松修改属性,这不是问题.
但是为什么我不能在标记中指定属性,就像我应该的那样？
编辑 - 完整代码
请注意,您需要将这些文件放入单独的HTML导入文件中,并且需要"webcomponents-lite.js"库.
主HTML文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
test-flag
{
border: 1px solid blue;
}
</style>
</head>
<body>
<script src="lib/webcomponents-lite.min.js"></script>
<link rel="import" href="test-flag.html">
Here is the custom test-flag component:
<p>
<test-flag flagtext="my text"></test-flag>
</body>
</html>
文件:test-flag.html
<template>
<style>
</style>
Content:
<div id="testflagID">
</div>
</template>
<script>
(function() {
var _currentScript = (document._currentScript || document.currentScript);
var importDoc = _currentScript.ownerDocument;
var customPrototype = Object.create(HTMLElement.prototype); …我希望本地开发一些web组件,即使互操作性不是很好.所以我在我的ubuntu操作系统上的chrome:// flags标签下启用了google-chrome-stable版本50.0.2661.102的实验性网络平台功能...但我仍然只有不推荐使用(根据developer.mozilla文档的链接)方法:
document.registerElement( {...})
在Firefox中也一样.我知道如果我安装了聚合物,那么polyfill会修复它,但据我所知,聚合物api与W3C标准不是100%相同.有没有人设法使用最新标准在浏览器中本地试用Web组件？特别是这部分标准我想试试:
2.1.1 Creating an autonomous custom element
This section is non-normative.
For the purposes of illustrating how to create an autonomous custom element, let's define a custom element that encapsulates rendering a small icon for a country flag. Our goal is to be able to use it like so:
<flag-icon country="nl"></flag-icon>
To do this, we first declare a class for the custom element, extending HTMLElement:
class FlagIcon extends HTMLElement {
constructor() {
super();
this._countryCode …javascript google-chrome cross-browser web-component custom-element
给定阴影根中包含的元素,如何获取承载所述阴影根的元素？有没有一种方法可以实现这一点,无论元素在树中的位置(即给定引用element2或者element3,获取引用element1)？
element1
? #shadow-root
? element2
? element3
如果我理解正确，创建Web组件的一个实例可以概括为创造一个影子根，从模板复制标记，如到其中：
var Template = document.querySelector('#myTemplate');
var TemplateClone = document.importNode(Template.content,true);
TargetElement.appendChild(TemplateClone);
当然，如果模板中包含的风格标签的CSS规则，这些都将被复制为好。因此，我们可以有属于一个网络组件的内部标记范围的样式。
问题：
在给定的 html 中，如何判断 dom 元素是浏览器定义的标准 html 组件还是脚本（作者）定义的 web 组件：
<div></div>
<custom-web-component></custom-web-component>
我知道无法以编程方式检查 Web 组件是否已注册。他们也都被考虑HTMLElement。有没有办法检查 dom 节点是标准 html 还是自定义 Web 组件？让我们假设我使用querySelector()
在MDN文档中，我看到了WebComponents可以实现的名为的函数adoptedCallback。MDN文档说明：
“将自定义元素移到新文档时调用。”
https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/Using_custom_elements
https://github.com/w3c/webcomponents/issues/512
自定义元素已移至新文档是什么意思？我应该在什么情况下实施？
我想从我的 Web 组件中的一个元素执行一个定义的类函数：
customElements.define('first-component', class FirstComponent extends HTMLElement {
constructor() {
super();
}
log() {
console.log('Well Done!')
}
connectedCallback() {
this.innerHTML = '<button onclick="log()">Do it</button>'
}
});
现在状态：ReferenceError：未定义日志