Блог

Главная - Вопросы по программированию - Как получить доступ к документу / окну из shadow dom в vue?

Как получить доступ к документу / окну из shadow dom в vue?

#vue.js #vuejs2 #web-component #shadow-dom

#vue.js #vuejs2 #веб-компонент #shadow-dom

Вопрос:

Я использую библиотеку ( vue-airbnb-style-datepicker ), которая пытается получить доступ к document объекту, чтобы подключить некоторые прослушиватели событий. Перенос приложения vue в качестве веб-компонента приводит к следующей ошибке:

 Cannot read property 'addEventListener' of null

Мой main.js :

 import Vue from "vue";
import App from "./App.vue";
import wrap from "@vue/web-component-wrapper";
import AirbnbStyleDatepicker from "vue-airbnb-style-datepicker";

Vue.use(AirbnbStyleDatepicker, {});
Vue.config.productionTip = false;

const WrappedElement = wrap(Vue, App);

window.customElements.define("gpc-components", WrappedElement);

Как я могу использовать document объект в веб-компоненте?

Возможно ли это вообще?

Если нет, существует ли обходной путь?

Комментарии:

1. document доступно на всей странице, включая shadowRoots; так что должно быть что-то еще не так. Опубликуйте код, в котором вы используете addEventListener

2. Вы абсолютно правы. Проблема заключалась в том, что document.getElementById я пытался найти элемент внутри Shadow DOM и прикрепить прослушиватель событий к этому элементу, но элемент был null. Спасибо за ваш вклад.

Метки: