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

Question

当将新元素添加到 中时iframe，用户事件（即单击）需要相当长的时间才能开始被识别。（在我的场景中更加明显，以至于完全无法使用）精通 Vue 的人是否至少了解为什么会发生这种情况以及是否有办法防止它发生？任何见解将不胜感激。谢谢。*原因是我正在构建一个浏览器扩展，将侧边栏注入到页面中，并且我需要隔离CSS，因为该扩展要在各个页面上使用，所以几乎不可能防止所有样式泄漏到页面中注入侧边栏。是的，避免iframe使用 and using#myDiv{ all: unset }在某种程度上是有效的，但对于页面 CSS 中定义的一些非常具体的选择器来说会失败（并且完全不适用于input元素）。在我想要支持的所有页面上寻找它们很快就会变成一场噩梦。

Answer 1

回答我自己的问题，因为没有人对此有任何解释。然而，这并没有回答最初的问题，但我认为如果有人偶然发现这个问题，他们应该知道我是如何解决它的。

最后，我放弃了 iFrame 的想法，并使用Shadow DOM的概念来将页面的 CSS 和注入的扩展的 CSS 彼此隔离。

尽管这种方法有其自身的注意事项*，但恕我直言，它优于使用 iframe。

*就像需要手动将自定义样式注入到影子根中一样。并且还需要将影子根元素存储在应用程序所有部分都可以访问的地方（不是 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 来互相点赞，我想您只能靠自己了。