Вырезать Vue компонент и вставить в body сайта. Чем чревато?

Question

[Renhor]

Есть какие-либо последствия или возможные ошибки у такого кода?

mounted() {
    const el = this.$el.parentNode.removeChild(this.$el);
      
    document.body.appendChild(el);
},
destroyed() {
    document.body.removeChild(this.$el);
},

Comments

[Алексей Ярков]

Ну так попробуйте на том же jsfiddle. Это быстрее, чем ждать ответа здесь.

[Алексей Ярков]

А какую задачу это решает? Может вы идёте не тем путём?

[Renhor]

Алексей Ярков, необходимо сделать модальные окна. Если не вставлять компонент в body, то оверлей не перекрывает топ меню, не смотря на fixed и z-index. Я уже пробовал, на первый взгляд никаких ошибок нет и даже анимация, которая начинается в хуке beforeMount - проигрывается адекватно, но мало ли какие ошибки вылезут потом?

Answer 1

[Константин Б.]

Я так делал для выезжающих панелей никаких проблем это не вызовет.

У меня получился вот такой код для самой панели или в вашем случае окна

mounted() {
            document.addEventListener('click', () => this.closePanel());
            document.body.appendChild(this.$el);
            document.body.style.overflow = "hidden";
            setTimeout(() => this.isOpened = true, 100)
        },
        beforeDestroy() {
            this.isOpened = false;
            document.body.style.overflow = "auto";
        },