- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在学习网络组件并正在构建一个动态列表以掌握它们。让它工作后,我读到最好使用 connectedCallback
方法附加影子根。但是,尝试这样做后,我遇到了一堆无法修复的错误。此外,我为标签设置简单属性的方式似乎有点冗长:是否有更简单的方法来获取属性并将其显示为标签?
这是我的工作示例:
const template = document.createElement('template');
template.innerHTML = `
<style>
:host {
display: block;
font-family: sans-serif;
text-align: center;
}
button {
border: none;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
</style>
<h1>To dos</h1>
<lable id="lable1"></lable>
<select></select>
`;
class TodoApp extends HTMLElement {
constructor() {
super();
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$todoList = this._shadowRoot.querySelector('select');
this.label1 = this._shadowRoot.getElementById('lable1')
}
static get observedAttributes() {
return ['att1'];
}
attributeChangedCallback(name, oldValue, newValue) {
this.label1.innerText = this.getAttribute('att1');
}
renderTodoList() {
this.$todoList.innerHTML = '';
this.todosArray.forEach((todoP) => {
let $todoItem = document.createElement('option');
$todoItem.text = todoP.text;
$todoItem.value = todoP.id;
this.$todoList.appendChild($todoItem);
});
}
set todos(value) {
this.todosArray = value;
this.renderTodoList();
}
}
window.customElements.define('to-do-app', TodoApp);
当我添加一个 connectedCallback()
方法并在那里创建影子 dom 时,我得到了一堆错误。我的标记只是:
<to-do-app att1="value 1 attribute"></to-do-app>
我试过这个:
class TodoApp extends HTMLElement {
constructor() {
super();
this.label1 = '';
}
connectedCallback() {
this._shadowRoot = this.attachShadow({ 'mode': 'open' });
this._shadowRoot.appendChild(template.content.cloneNode(true));
this.$todoList = this._shadowRoot.querySelector('select');
this.label1 = this._shadowRoot.getElementById('lable1')
}
static get observedAttributes() {
return ['att1'];
}
attributeChangedCallback(name, oldValue, newValue) {
this.label1.innerText = this.getAttribute('att1');
}
但是得到错误:
TypeError: can't assign to property "innerText" on "": not an object
最佳答案
我是 not sure at all it's best to define the Shadow DOM in connectedCallback()
(除非您想使用 Shadow DOM polyfill。您是从哪里读到的?
无论如何,如果你的例子是connectedCallback()
, 错误是由于 attributeChangedCallback()
在 connectedCallback()
之前调用.
这就是为什么属性 this.label1
attributeChangeCallback()
时尚未设置被称为。
相反,测试属性是否存在:
attributeChangedCallback(name, oldValue, newValue) {
if ( this.label1 )
this.label1.innerText = this.getAttribute('att1');
}
并且,在渲染组件时,测试属性是否存在:
connectedCallback() {
//...
this.label1 = this._shadowRoot.getElementById('lable1')
if ( this.getAttribute( 'att1' ) )
this.label1.innerText = this.getAttribute( 'att1' )
}
更新
读取属性的最佳方式取决于您何时需要它。在您的用例中,因为当您需要它时它已经在标记中了 connectedCallback()
,您可以使用 this.getAttribute()
获取它.
分配它的值,也许你应该使用template literal使用变量而不是 <template>
元素。
let label = this.getAttribute( 'att1' )
this.shadowRoot.innerHTML = `<label>${label}</label>`
关于javascript - 使用 connectedCallback() 会破坏 Web 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56889259/
我正在使用 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
我是一名优秀的程序员,十分优秀!