[BUG] Shadow root initialization fails when widget is rendered inside modal #127
Description
Describe the bug
When embedding the widget inside a popup / modal environment, the component throws an exception because connectedCallback() attempts to call attachShadow() again on an element that already has a shadow root.
This causes a runtime failure and the widget will not initialize properly.
Error:
Uncaught (in promise) NotSupportedError: Failed to execute 'attachShadow' on 'Element': Shadow root cannot be created on a host which already hosts a shadow tree.
Affects:
- [] Widget
To Reproduce
Steps to reproduce the behavior:
Render same widget instance inside popup/modal component where DOM reattachment happens.
Expected behavior
A clear and concise description of what you expected to happen.
Desktop (please complete the following information):
- OS: Windows
- Browser Chrome
- Version 141.0.7390.108
Additional context
I am now using the following function written by ChatGPT to replace async connectedCallback() in widget/src/src/cap.js. It seems to be working fine.
I am not a professional JavaScript developer, and I am not sure if these codes will have any negative effects.
async connectedCallback() {
this.#a = this;
if (!this.shadowRoot) {
this.#i = this.attachShadow({ mode: "open" });
} else {
this.#i = this.shadowRoot;
}
if (!this.#s) this.#s = document.createElement("div");
this.createUI?.();
this.addEventListeners?.();
await this.initialize?.();
this.#s?.removeAttribute?.("disabled");
const e = this.getAttribute("data-cap-worker-count");
const t = e ? parseInt(e, 10) : null;
this.setWorkersCount(t || navigator.hardwareConcurrency || 8);
const r = this.getAttribute("data-cap-hidden-field-name") || "cap-token";
if (!this.querySelector(`input[type="hidden"][name="${r}"]`)) {
this.insertAdjacentHTML("beforeend", `<input type="hidden" name="${r}">`);
}
}