Shadow DOM reset stylesheet

I'd like the app I'm making to use a reset.css at the global level. I'd also like it to penetrate all shadow roots but have low specificity. How can I accomplish this?

Let's say my reset.css contains something like:

li, ::shadow li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Then my custom element has a template like:

<template>
    <style>
        li {
            padding: 10px;
        }
    <style>
    <ol>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ol>
</template>

My issue is the template's li selector doesn't have enough specificity to beat ::shadow li. I don't want to have to repeat myself in every custom element. I think I could add a <link> to each <template> but then I'd be repeating myself again. I could also have JavaScript inject the <link> but I'm not sure that's the best way.

What are some other ways I could use a reset.css that penetrates shadow roots but has very little specificity?

I understand that post deprecation of ::shadow and /deep/ selectors this question might not be valid anymore, but if you are still facing this issue, then I would suggest you to use css @imports to inject your common reset.css in shadow-root template.

Since it has to be first tag inside template, your inline stylesheet will take precedence over reset.css, where ever applicable.

I have written an answer here on same topic and one here to inject those @imports at runtime if you don't want to repeat it yourself for each template. Probably it will be work out for you.