Есть ли обратный вызов в пользовательских элементах для рендеринга CSS? - PullRequest
Новая
       21

Есть ли обратный вызов в пользовательских элементах для рендеринга CSS?

0 голосов
/ 22 марта 2020

Это мой пользовательский элемент. 

class ContextMenu extends HTMLElement {
    constructor() {
        super()
    }

    connectedCallback() {
        console.log(this.getBoundingClientRect()) // empty
        console.log(this.offsetWidth) // 0
        console.log(this.offsetHeight) // 0

        setTimeout(() => {
          console.log(this.getBoundingClientRect()) // good
          console.log(this.offsetWidth) // good
          console.log(this.offsetHeight) // good
        }, 1)
    }
}

document.customElements.define('context-menu', ContextMenu)

Это контекстное меню, которое появляется при щелчке правой кнопкой мыши. Моя цель здесь состоит в том, чтобы немедленно проверить, слишком ли высокое или широкое контекстное меню, чтобы отображаться там, где пользователь щелкнул правой кнопкой мыши, и, если это так, я настрою его соответствующим образом.

Моя проблема заключается в том, что connectedCallback() кажется, работает до того, как элемент отображается на экране. Если я установлю таймер всего на 1 мс, у меня будут данные о местоположении, которые мне нужны.

Есть ли нативный afterRender() или что-нибудь более подходящее для меня? Мой текущий метод не обнаруживается человеческим глазом, но зависит от мощности процессора, и увеличение таймера сделает его заметным.

1 Ответ

1 голос
/ 22 марта 2020

Отвечая себе: это логически невозможно, потому что встроенный CSS, который позиционирует контекстное меню, добавляется только позже. Поэтому в моем случае правильным решением будет прослушивание изменений атрибута «style».

...