訪問自定義組件中的元素 | Vue3組成api

Question

我創建了一個自定義組件，因為我需要 scope 和 css。

import { defineCustomElement } from "vue";
…
const CustomElement = defineCustomElement(ImportConfig);
window.customElements.define("import-new-custom", CustomElement);

如何使用 JS 訪問元素，在使用 vues 組合 api 的自定義組件內部動態更改 styles？ 我嘗試使用模板引用，但這並不適合所有需求。

感謝所有幫助。 沒有找到任何關於 Vue 的最新信息。

Answer 1

如果是open的 shadowRoot，則為document.querySelector("import-new-custom").shadowRoot.getElementById(..) 。 closed的 shadowRoot沒有.shadowRoot屬性。 但是您（組件開發人員）可以自己分配入口點。

遞歸深入shadowRoots； 請參閱： 如何使用 vanilla JS Web 組件從子組件引用父組件中的方法？ （不是任何框架或庫）

從 shadowRoot內部，您可以獲得host元素： this.getRootNode().host

標准.closest(...)不跨越 shadowRoot 邊界； 對於closestElement(..) ，請參閱： 如何使用 vanilla JS Web 組件從子組件引用父組件中的方法？ （不是任何框架或庫）