attributeChangedCallback не вызывается даже после определения наблюдаемых атрибутов - PullRequest
Новая
       34

attributeChangedCallback не вызывается даже после определения наблюдаемых атрибутов

0 голосов
/ 20 февраля 2020

В следующем коде attributeChangedCallback никогда не вызывается, даже если атрибут 'содержимого' создан, изменен или удален. 

class Square extends HTMLElement {

    static get observedAttributes() {

        return ['content'];
    }
    constructor(val) {
        super();
        console.log('inside constructor');
        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(document.createElement('button'));

        this.button = this.shadowRoot.querySelector('button');
        this.button.className = "square";

        this.content = val;

        console.log('constructor ended');
    }

    get content() {
        console.log('inside getter');
        return this.button.getAttribute('content');
    }
    set content(val) {
        console.log('setter being executed, val being: ', val);
        // pass null to represent empty square
        if (val !== null) {
            this.button.setAttribute('content', val);

        } else {
            if (this.button.hasAttribute('content')) {
                this.button.removeAttribute('content');
            }
        }

    }
    connectedCallback() {
        //console.log('connected callback being executed now');
    }

    // not working :(
    attributeChangedCallback(name, oldValue, newValue) {
        console.log('attribute changed callback being executed now');
        if (name === 'content') {
            this.button.innerHTML = newValue?newValue:" ";
        }
    }
}
customElements.define('square-box', Square);

На основе передовых практик, приведенных здесь , я хочу, чтобы побочный эффект изменения атрибута (обновление внутреннего HTML в моем случае) имел место в attributeChangedCallback. Однако, когда я перемещаю это обновление в сеттер, код работает нормально.

1 Ответ

1 голос
/ 20 февраля 2020 
set content(val) {
        console.log('setter being executed, val being: ', val);
        // pass null to represent empty square
        if (val !== null) {
            this.button.setAttribute('content', val);

        } else {
            if (this.button.hasAttribute('content')) {
                this.button.removeAttribute('content');
            }
        }

    }

Вы смешиваете родителей и детей

Вы определяете сеттер для вашего элемента (► родительский элемент)

Когда вы делаете this.button.setAttribute('content', val);

Вы меняете атрибут вашего элемента ( ► элемент ребенка)

Это никогда вызовет attributeChangedCallback из (►parent)
, потому что его атрибуты не изменены

Вам необходимо go "поднять DOM" с помощью .getRootNode () и / или .host для установки атрибутов из родительских элементов.

или использования пользовательских событий (всплывание DOM) для уведомить родителей о том, что дети что-то сделали / изменили

Полагаю, вы хотели это сделать 

set content(val) {
        //  loose ==null comparison for null AND undefined, 
        //  element.content=null; will remove the attribute
        if (val==null) 
            this.removeAttribute('content');
        else 
        //  but you DO want .content(0) (0==false) set as "0"
            this.setAttribute('content', val);
    }
...