Javascript iframe内Vue 3实例中事件侦听器的延迟注册

出于一个非常具体的原因*，我需要一个Vue实例在

iframe

中运行。我成功地做到了以下几点，调整了代码以支持Vue 3并删除了插槽，因为我只需要在

iframe

中运行一个特定的组件

但有一个非常具体的问题，我甚至还没有设法开始调试

正如您在此中所看到的，当一个新元素添加到

iframe

中时，用户事件（即单击）需要相当长的时间才能开始被识别。（在我的场景中，这一点更加明显，以至于完全无法使用）

精通Vue的人是否至少了解为什么会发生这种情况，以及是否有办法防止这种情况发生

如有任何见解，将不胜感激。谢谢

---

*原因是我正在构建一个浏览器扩展，该扩展将侧栏插入到页面中，我需要隔离CSS，因为该扩展将用于各种页面，因此几乎不可能防止所有stlyes泄漏到插入的侧栏中

---

是的，避免使用

iframe

并使用

#myDiv{all:unset}

在某种程度上是可行的，但对于页面CSS中定义的一些非常特定的选择器来说是失败的（并且完全不适用于

输入

元素）。在我想支持的所有页面上寻找它们很快就会成为一场噩梦。

回答我自己的问题，因为没有人对此有所了解。hovewer，这并不能回答最初的问题，但我想，如果有人偶然发现这个问题，他们应该知道我是如何解决的

最后，我放弃了iFrame的概念，使用了的概念将页面的CSS和注入扩展的CSS彼此隔离开来

尽管这种方法有自己的警告*，但它比使用iFrame要好

*就像需要手动将自定义样式注入到阴影根中一样。此外，还需要将shadowroot元素存储在应用程序的所有部分都可以访问的地方（不是Vuex，元素本身不能存储在那里），以便使类似的工作正常进行

下面是我用来将侧边栏插入页面的代码片段：

// append a new node to the document body
let shadowHost = document.createElement("div");
document.body.appendChild(shadowHost);
    
// make it the root of our shadow DOM
let shadow = shadowHost.attachShadow({ mode: 'open'})

// create a new node for the sidebar
let sidebar = document.createElement("div");
sidebar.id = "my-sidebar";

// and also a style node into which we put all our custom css
const style = document.createElement('style');
// getPackedCss is my function that returns all the custom css as a string
style.textContent = getPackedCss();

// and append those to the shadow DOM
shadow.appendChild(style);
shadow.appendChild(sidebar);
    
// store the shadow root somewhere that we can access
// globally in order to select elements from it
staticStore.shadowRoot = shadow;

// create our vue app and mount it to the shadow DOM
const app = createApp(MyApp);
app.mount(sidebar);

---

---

如果你真的需要Vue 3和iframe来彼此喜欢，我想你只能靠自己了。

在安装预加载程序时显示预加载程序如何？正如我所说，在我的用例中，这是不可行的，因为加载时间可能达到数十秒，这会破坏用户体验：(