回答我自己的問題，因為沒有人對此有任何解釋。然而，這并沒有回答最初的問題，但我認為如果有人偶然發(fā)現(xiàn)這個問題，他們應(yīng)該知道我是如何解決它的。
最后，我放棄了 iFrame 的想法，并使用Shadow DOM的概念來將頁面的 CSS 和注入的擴展的 CSS 彼此隔離。
盡管這種方法有其自身的注意事項*，但恕我直言，它優(yōu)于使用 iframe。
*就像需要手動將自定義樣式注入到影子根中一樣。并且還需要將影子根元素存儲在應(yīng)用程序所有部分都可以訪問的地方（不是 Vuex，元素本身不能存儲在那里），以便使諸如此類的事情正常工作。
這是我用來將側(cè)邊欄注入頁面的代碼片段：
// 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 來互相點贊，我想您只能靠自己了。
