嵌套元素（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>
工具栏.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;
shadowRoot.appendChild(content.cloneNode(true));
}
});
</script>
但是在toolbar.html document.currentScript中与在app-
container.html中相同，因此querySelector('#app-toolbar')无法找到ID为的模板app- toolbar。如何解决这个问题呢？
示例已在Chrome 55上测试（不使用polyfill）。
问题答案：
document.currentScript包含对当前正在解析和执行的脚本的引用。因此，constructor()从另一个脚本调用该函数时，它不再对您有效
。
相反，您应该将其值保存在脚本开头的变量中，并在构造函数中使用此变量：
<script>
var currentScript = document.currentScript
customElements.define( ... )
...
</script>
如果您有多个脚本，则应使用不同的名称。
或者，您可以将短暂值封装在一个闭包中：
(function(owner) {
customElements.define('app-container', class extends HTMLElement {
constructor() {
super();
let shadowRoot = this.attachShadow({ mode: 'open' });
const content = owner.querySelector('#app-container').content;
shadowRoot.appendChild(content.cloneNode(true));
}
});
})(document.currentScript.ownerDocument);
在此，将值document.currentScript.ownerDocument分配给在owner调用时仍正确定义的参数constructor()。
owner 是本地定义的，因此您可以在其他文档中使用相同的名称。
-
我试图从模态弹出窗口的标题获取文本。在页面上有许多这样的窗口——每个窗口都有uniqe id。在每个这样的模态窗口中，所有元素都有相同的类名，所以首先我需要指向正确的窗口，然后寻找特定的元素。所以我用这个代码来做： 但它没有向我展示任何东西。我发现，当我以前打印这个标题文本时，这个函数工作正常。在从函数返回值之前，我添加了以下内容： 在返回文本之前，我尝试了初始化变量，但没有成功。我可以继续我的解
-
我需要从这个JSON中获取所有值作为数组，并放心 这是示例JSON 使用jsonpath提取器，它是 但我需要放心地提取路径 但是它不起作用，我怎么写JSON路径来得到需要的数组呢？
-
哪里需要从同级组件访问元素，但不需要从父 Cmp 访问元素。 例： 需要组件 B 的 templateA 中的 iframe 元素来隐藏 或删除该元素。 index.html ComponentA.html @组件 @组件
-
问题内容： 我有一个：before开头的’quote’和一个：after结束的报价。 现在，我想要的是一个：after：after供“引用”参考，但我无法使其正常工作。 有人知道这是否可能吗？ 到目前为止，我的代码： 问题答案： 已经提出了嵌套和伪元素的想法；请参阅“生成和替换的内容”模块的这一部分。但是，该模块已被放弃，等待完全重写，因此在重新发布该文档之前，我不会屏息。即便如此，嵌套内容伪元素
-
有人能帮忙填写上面的评论部分吗？或者是否有其他选项来映射这些对象？ 编辑：我尝试了下面的解决方案，但是接口实现类本身发生了变化。
-
我可以用Firefox截屏整个页面。以文件（'2.png'）的形式获取屏幕截图，但当我使用段落截图一个web元素时。屏幕截图（'1.png'），它总是引发这个异常：