[BUG] getInlineAnchorList() and custom getRootContainer() enter infinite loop

[veedeo]

What happened?

This code works as expected

export default Anchor;

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
  document.querySelectorAll(`.comments-comment-texteditor .comments-comment-box__button-group`);

But I would like to customize root Container:

1. prepend to anchor children
2. dont use Shadow DOM

So when I add a custom getRootContainer() it runs in infinite loop, what Im missing here?

export default Anchor;

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () =>
  document.querySelectorAll(`.comments-comment-texteditor .comments-comment-box__button-group`);

export const getRootContainer: PlasmoGetRootContainer = ({ anchor, mountState }) => {
  console.log(anchor, mountState);
  return anchor.element;
}

Version

Latest

What OS are you seeing the problem on?

No response

What browsers are you seeing the problem on?

No response

Relevant log output

No response

(OPTIONAL) Contribution

• I would like to fix this BUG via a PR

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems.

[gchust]

I have faced the same issue, but if we are also customizing renderer, then everything works right.

So anyone faced this issue could try the solution below

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  createRootContainer
}) => {
  const rootContainer = await createRootContainer()
  const root = createRoot(rootContainer)
  root.render(<SomeComponent />)
}

[wkABXY]

need a complete example，please。

[wkABXY]

export const getInlineAnchor = async () => document.querySelector(".home")

export const getRootContainer: PlasmoGetRootContainer = async ({ anchor }) => {
  return anchor.element.appendChild(document.createElement("div"))
}

const PlasmoOverlay: FC<PlasmoCSUIProps> = () => {
  return (...)
}

export const render: PlasmoRender<PlasmoCSUIJSXContainer> = async ({
  anchor,
  createRootContainer
}) => {
  console.log(anchor.element)
  const rootContainer = await createRootContainer(anchor)
  const root = createRoot(rootContainer)
  root.render(<PlasmoOverlay />)
}

export default PlasmoOverlay

enter infinite loop