I can't access other elements outside the shadow root

[kaf-lamed-beyt]

I'm trying to get the unique url of a tweet container when i click on the button I'm rendering. I have already specified where i want my button to be attached in the DOM.

Ideally, i treid listening to the currentTarget of the click event and try to get the closest element with the attibut I have set. But it always return null. I've also tried storing the lins in localStorage. But it seems as though my approach was still flawed.

This is an excerpt of what my CSUI code looks like.

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll('[data-testid="bookmark"]')

  return Array.from(anchors).map((element) => {
    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}

const CreateBookmark = () => {
  const { openToast } = useToastContext()
  const { isOpen, onOpen, onClose } = useDisclosure()
  const [tweetLink, setTweetLink] = React.useState<string>("")


  const openModal = (event: React.MouseEvent<HTMLButtonElement>) => {
    event.stopPropagation()
    event.preventDefault()

    const url = event.currentTarget.closest('[data-testid="bookmark"]').getAttribute("data-tweet-link")

    setTweetLink(url)
  }

  return (
    <ChakraProvider>
      <Button
        type="button"
        onClick={openModal}
        style={{
          background: "#8e3dff",
          height: "30px",
          width: "100%",
          border: "none",
          color: "#fff",
          fontSize: "14px",
          borderRadius: "18px",
          textTransform: "capitalize",
          margin: "0 22px",
          cursor: "pointer",
          fontWeight: "bold"
        }}>
        bookmark
      </Button>
    </ChakraProvider>
  )
}

Any help on how to get the exact link that corresponds when i click on a specific button would be highly appreciated.

[kaf-lamed-beyt]

To achieve this. I had to first select the parent element holding both my anchor and the <plasmo-csui> web component, then I proceeded to query the shadowRoot

Here's a high-level overview of what my snippet looks like.

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
  const anchors = document.querySelectorAll("#anchor")

  return Array.from(anchors).map((element) => {
    const tweetContainer = element.closest("container")
    const closest = element.parentElement.querySelector("plasmo-csui")

    if (closest) {
      if (closest.shadowRoot) {
        const shadowRoot = closest.shadowRoot
        const content = shadowRoot.querySelector("#plasmo-inline")
        
        // do whatever you wish with the content
      }
    }

    return {
      element,
      insertPosition: "beforebegin"
    }
  })
}