PlasmoCSUI 设置 h-full 无法填充父节点

Question

PlasmoCSUI h-full 不工作

在twitter上，我想将自己的元素（按钮）注入到列表（一行水平按钮）的末尾，并且我想保持与它们相同的按钮高度，但是我发现我自己的元素不起作用与 h-full 并且无法填充父节点。有谁知道这个问题吗？

如下图

import cssText from "data-text:~style.css"
import type { PlasmoCSConfig, PlasmoGetInlineAnchorList } from "plasmo"

export const getStyle = () => {
    const style = document.createElement("style")
    style.textContent = cssText.replaceAll(":root", ":host")
    return style
}
export const config: PlasmoCSConfig = {
    matches: ["*://*.x.com/*", "*://*.twitter.com/*"]
}

export const getInlineAnchorList: PlasmoGetInlineAnchorList = async () => {
    const elements = document.querySelectorAll('[role="tablist"]:last-child')
    return Array.from(elements).map((el) => ({
        element: el,
        insertPosition: "beforeend"
    }))
}

const PlasmoCSUI = () => {
    return (
        <div className="my-auto flex items-center justify-center" style={{ height: 'var(--twitter-tab-height)' }}>
            <div className="my-auto w-9 h-full flex items-center justify-center ml-1 bg-red-500">
                tag
            </div>
        </div>
    )
}

export default PlasmoCSUI

Answer 1

框架使用shadow DOM，会自动生成两层div容器节点。我在web检查器中找到了两个节点ID，然后在style.css中手动添加了height: 100%。如下：

#plasmo-shadow-container {
    height: 100%;
}

#plasmo-inline {
    height: 100%;
}