使用 connectedCallback() 会破坏 Web 组件

Question

我正在学习 Web 组件并正在构建一个动态列表以掌握它们。让它工作后，我读到最好使用 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

Answer 1

我是（除非你想使用 Shadow DOM polyfill。你在哪里读到的？

无论如何，如果您的示例使用 connectedCallback()，错误是由于 attributeChangedCallback() 在 connectedCallback().

之前被调用

这就是调用 attributeChangeCallback() 时属性 this.label1 尚未设置的原因。

相反，测试属性是否存在：

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>`

使用 connectedCallback() 会破坏 Web 组件

Using connectedCallback() breaks the web component

javascript

web-component

shadow-dom

custom-element

native-web-component