我创建了一个web组件
Vue CLI 3
和
Element
:
vue-cli-service build --target wc --name my-foo foo.vue
组件利用
DatePicker
和
Select
from元素,它反过来利用
popper.js
和
vue-popper
在被子下面。元素源存储库包含自己的popper.js和vue popper,而不是使用
净现值
包装。这个
popper.js
元素中的文件只是说
{{version}}
所以我不确定它有多旧,或者它是否被元素开发人员大量定制。看起来不像是
latest popper.js
文件。
事实上,包含的Popper版本在
日期选择器
或
选择
在web组件内部激活:
[Vue warn]: Error in callback for watcher "pickerVisible": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."
运行在Vue CLI生成的web组件之外,元素控件工作正常。经过深入研究,我发现Vue CLI 3生成的web组件包装器利用了
shadowRoot
,开发人员工具显示
#shadow-root (open)
在运行时使用web组件时的层次结构中。
以前popper.js的旧版本在
树根
,但至少有一个
merged pull request
早在2016年就解决了这个问题。它看起来不像Element包含的版本能够在影子根目录中正常工作,考虑到问题修复了多久,Element是一个对Vue友好的库,这令人惊讶。
有没有人能建议
树根
不放弃样式隔离的问题,或者强制元素使用最新的vue popper包而不是它自己包含的版本的干净方法?
