native Web components and customized scrollbar styling issue

Question

Hi i wanted to create a webcomponent with a custom scrollbar but i do not succeed in styling that webcomponent inside a shadow dom object. I created a mixin scrollbar with these pseudo classes and included it into my class &::part(panel)

@mixin scrollbar() {
    max-height: var(--scrollbar--max-height, 100%);
    overflow-y: auto;
    overflow-x: hidden;

    &::-webkit-scrollbar {
        width: var(--scrollbar-size);
        height: var(--scrollbar-size);
    }

    &::-webkit-scrollbar-thumb {
        border-radius: var(--scrollbar-border-radius);
        background-color: var(--scrollbar-foreground-color);
    }

    &::-webkit-scrollbar-track {
        background: var(--scrollbar-background-color);
    }
}

but it still gives the default scrollbar. outside my shadow dom it works perfect in chrome. Have anyone an idea what i'm missing here or is this not possible?