Я создал веб-компонент с Vue CLI 3 и Element :
vue-cli-service build --target wc --name my-foo foo.vue
Компонент использует DatePicker и Select от Element, которые, в свою очередь, используют некоторые старые версии popper.js и vue-popper под обложками.Исходный репозиторий Element включает в себя собственные popper.js и vue-popper вместо использования пакетов npm .Файл popper.js в Element просто говорит {{version}}, поэтому я не уверен, сколько ему лет или он был сильно настроен разработчиками Element.Он не очень похож на последний файл popper.js .
Как таковая, включенная версия Popper заканчивает тем, что выдает ошибки при активации DatePicker или Selectвнутри веб-компонента:
[Vue warn]: Error in callback for watcher "pickerVisible": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."
Работая вне сгенерированного веб-компонента Vue CLI, элементы управления Element работают нормально.После некоторых копаний я обнаружил, что оболочка веб-компонента, которую генерирует Vue CLI 3, использует shadowRoot, а инструменты разработчика показывают #shadow-root (open) в иерархии, когда веб-компонент используется во время выполнения.
СтарееВ версиях popper.js были проблемы с shadowRoot, но в 2016 году был хотя бы один объединенный запрос на получение , который решал проблему.Не похоже, что Element содержит версию, которая способна нормально работать в теневом корне, что удивительно, учитывая, как давно проблема была исправлена, и Element является дружественной к Vue библиотекой.
Может кто-нибудьпредложить обходной путь для проблемы shadowRoot, не отказываясь от стиля изоляции, или простой способ заставить Element использовать последнюю версию пакета vue-popper вместо собственной включенной версии?