🧩 Plasmo Developers•6mo ago

Inline CSUI Component + ShadowDOM not rendering elements that enter DOM tree later, correctly.

I'm using Shad-cn & React.JS. (confirmed shad-cn is ok) I've created inline anchor. Within the content script, I have a Select input, which opens as the user click it. As the user clicks over it, the options cuts to the bottom of the extension going outside of the extension as you can see in the screenshot attached. * Points to consider 1 - The Select options aren't available in DOM and enters in the DOM tree after user clicks the element. 2 - The select options doesn't take styles that are provided after it enters the DOM. 3 - The Select options renders outside of the extension widget, overflowing with the webpage. Important code snippets:

// content-script.ts

const INJECTED_ELEMENT_ID = `#secondary-inner.style-scope.ytd-watch-grid`;

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
  element: document.querySelector(INJECTED_ELEMENT_ID),
  insertPosition: "afterbegin"
});

export const getShadowHostId: PlasmoGetShadowHostId = () => `plasmo-inline`;

function MainUI() {
  return (
    <Provider>
      <Extension />
    </Provider>
  );
}

// content-script.ts

const INJECTED_ELEMENT_ID = `#secondary-inner.style-scope.ytd-watch-grid`;

export const getInlineAnchor: PlasmoGetInlineAnchor = async () => ({
  element: document.querySelector(INJECTED_ELEMENT_ID),
  insertPosition: "afterbegin"
});

export const getShadowHostId: PlasmoGetShadowHostId = () => `plasmo-inline`;

function MainUI() {
  return (
    <Provider>
      <Extension />
    </Provider>
  );
}

// model-selector.tsx
 <Select>
        <SelectTrigger className="w-fit space-x-3">
          <SelectValue placeholder="Model" />
        </SelectTrigger>

        <SelectContent position="popper"> // this is the part which act as a dropdown option that is causing the issue.
          <SelectGroup>
            {models.map((model) => (
              <SelectItem key={model.value} value={model.value.toString()}> // styles aren't working as well
                <div className="flex flex-row items-center">
                  <div className="mr-2"> {model.icon}</div>
                  <p>{model.label}</p>
                </div>
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>

// model-selector.tsx
 <Select>
        <SelectTrigger className="w-fit space-x-3">
          <SelectValue placeholder="Model" />
        </SelectTrigger>

        <SelectContent position="popper"> // this is the part which act as a dropdown option that is causing the issue.
          <SelectGroup>
            {models.map((model) => (
              <SelectItem key={model.value} value={model.value.toString()}> // styles aren't working as well
                <div className="flex flex-row items-center">
                  <div className="mr-2"> {model.icon}</div>
                  <p>{model.label}</p>
                </div>
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>

Maybe, this is a known issue and/or have a valid solution already to this problem. Either ways, I'll appreciate the solution to this.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Inline CSUI Component + ShadowDOM not rendering elements that enter DOM tree later, correctly.