Использование connectedCallback () разрушает веб-компонент - PullRequest
Новая
       53

Использование connectedCallback () разрушает веб-компонент

1 голос
/ 04 июля 2019

Я изучаю веб-компоненты и строю динамический список, чтобы освоить их. Получив это, я прочитал, что лучше всего прикрепить теневой корень, используя метод 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() и создаю там теневой домен, я получаю кучу ошибок. Моя разметка просто: 

<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: невозможно присвоить свойству "innerText" on "": не объект

1 Ответ

2 голосов
/ 04 июля 2019

Я совсем не уверен, что лучше всего определить Shadow DOM в connectedCallback() (если вы не хотите работать с полифилом Shadow DOM. Где вы это прочитали?

В любом случае, если ваш пример с 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().

Tu назначьте его значение, возможно, вам следует использовать литерал шаблона с переменной вместо элемента <template>. 

let label = this.getAttribute( 'att1' )
this.shadowRoot.innerHTML = `<label>${label}</label>`
...