2

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?

Olson.dev
  • 1,766
  • 2
  • 19
  • 39
  • Is there any reason you are shying away from using CSS classes within your template? Why couldn't you provide local override for global CSS traits via a class? – Mike Brant Aug 15 '15 at 04:05
  • This is why the `all` property was made... all we need now is for everyone implementing shadow styles to also implement that. – BoltClock Aug 15 '15 at 04:17
  • @MikeBrant, I could use classes but even then I'd have to be more verbose than I'd like. `.padded {}` isn't specific enough, nor is `li.padded` ... I'd have to use `ol li.padded` to override `::shadow li`. – Olson.dev Aug 15 '15 at 04:41
  • @BoltClock, I looked at `all` before asking but I don't know how to apply it to this scenario. Care to elaborate? – Olson.dev Aug 15 '15 at 04:43
  • I'm thinking something like resetting inherited styles on the root element and then `all: unset` on everything else. Anything that's not inherited takes its initial value, and anything that's inherited inherits all the way from the root. Though on closer inspection I *think* the cascade will still be a problem... – BoltClock Aug 15 '15 at 04:46
  • Perhaps rather than `::shadow li` you could try `* /deep/ li` - the universal selector has 0 specificity and combinators don't add to specificity either. (`/deep/` is now `>>>` in the spec but impls haven't updated AFAIK.) – BoltClock Aug 15 '15 at 04:49
  • @BoltClock Got around to trying `* /deep/ li` and it still somehow has more specificity. – Olson.dev Aug 15 '15 at 07:57
  • So, this question pretty much doesn't matter anymore because `/deep/`, `>>>`, and `::shadow` are now deprecated. – Olson.dev Sep 10 '15 at 11:52

1 Answers1

0

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.

Community
  • 1
  • 1
Abhinav
  • 1,346
  • 12
  • 25
  • This is what I ended up doing, more or less. I automated it with my custom element registration code: it automatically inserts a ` – Olson.dev Oct 06 '15 at 19:26