个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
问题描述
在 connectedCallback() 之后查询嵌入在模板元素中的节点时，Polymer (2.x) 似乎存在计时问题已被调用。我希望第一次调用 this.shadowRoot.querySelectorAll('h1')在下面的示例中应该返回所有 <h1>模板中的节点。Mozilla Custom Element Doc状态:
connectedCallback()Called when the element is inserted into a document, including into a shadow tree
据我了解，此时所有模板都应该已经被淘汰了。
从代码片段中可以看出，第一个查询返回一个空列表。但是，如果查询延迟，则返回节点。
这里有什么我遗漏的吗？
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer-element.html">
<link rel="import" href="polymer/lib/elements/dom-repeat.html">
</head>
<body>
<dom-module id="x-elem">
<template>
<template is="dom-repeat" items="[[testItems]]">
<h1>[[item]]</h1>
</template>
</template>
<script>
class XElem extends Polymer.Element {
static get is() { return 'x-elem' }
static get properties() {
return {
'testItems': {
type: Array,
value: function () {
return [1, 2, 3];
}
}
}
}
ready(){
super.ready();
}
connectedCallback() {
super.connectedCallback();
console.log("Number of nodes after connectedCallback: ", this.shadowRoot.querySelectorAll('h1').length);
var callback = () => {
console.log("Number of nodes after timeout: ", this.shadowRoot.querySelectorAll('h1').length);
}
setTimeout(callback, 100);
}
}
customElements.define(XElem.is, XElem);
</script>
</dom-module>
<x-elem></x-elem>
</body>
</html>最佳答案
connectedCallback 并不表示元素已被渲染。你可以使用 Polymer.RenderStatus.afterNextRender为此:
connectedCallback() {
super.connectedCallback();
Polymer.RenderStatus.afterNextRender(this, () => {
console.log('Number of nodes after connectedCallback: ', this.shadowRoot.querySelectorAll('h1').length);
});
}
关于javascript - 与 connectedCallback 相关的模板冲压时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48253293/
26
4
0
我正在使用 Web Components v1。 假设有两个自定义元素: parent-element.html child-element.html 我正在尝试在 parent-
问题描述 在 connectedCallback() 之后查询嵌入在模板元素中的节点时，Polymer (2.x) 似乎存在计时问题已被调用。我希望第一次调用 this.shadowRoot.quer
什么时候应该在 constructor 或 connectedCallback 中应用模板？当我在回调中执行此操作时，有时之前调用了 attributeChangedCallback 并且我无法查询元
我是 Web 组件的新手，我注意到一些示例在自定义元素的构造函数中设置 dom，而其他示例在 connectedCallback 中设置。 由于两者似乎都可以正常工作(尽管我只尝试了 Chrome)，
class SomeClass extends HTMLElement { constructor() { super(); } connectedCallb
正如文档所说: connectedCallback fires each time a custom element is appended into a document-connected ele
我想知道 ready() 方法在 polymer 中的重要性是什么，这种方法的准时初始化是什么意思，以及 read( ) 和 connectedCallback() ??? 最佳答案 以下应该有所帮助
我正在学习网络组件并正在构建一个动态列表以掌握它们。让它工作后，我读到最好使用 connectedCallback 方法附加影子根。但是，尝试这样做后，我遇到了一堆无法修复的错误。此外，我为标签设置简
我正在创建一个需要在列表中切换元素的选举应用程序。我有以下自定义元素 Web 组件。为了简洁起见，我已经从类中删除了不相关的函数。 // Position // -------------------
我有一个类叫做 QueryAddable class QueryAddable extends HTMLElement { connectedCallback() { console.lo
为什么 connectedCallback() 会破坏我的 Plunk？ Comment and uncomment it in this demo to see what I mean.我做错了什么
spec说: However, note that connectedCallback can be called more than once, so any initialization work
内connectedCallback()我的自定义元素的方法 textContent作为空字符串返回。 基本上我的代码归结为以下...... class MyComponent extends HTM
我正在使用非常好的自定义元素。但是我遇到了一个问题: 当 connectedCallback() 函数被调用时，节点似乎还没有在 DOM 中的位置，因此我无法访问它的父节点——我需要它们。 class
粘贴在我的问题中的语句是从 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Usin
我是一名优秀的程序员,十分优秀！