CSS Custom Properties - Child pseudo-elements inherit parent's definitions

Confirmed Issue #17410857 • Assigned to Francois R.

Details

Author
Lauren S.
Created
May 7, 2018
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

If a parent element has a pseudo element that uses a CSS Custom Property, any pseudo elements on a child element inherit the parent’s definition of that custom property, ignoring where that custom property may have been redefined.

https://codepen.io/laurenspence/pen/gzxQyY

Using:
Windows 10 Pro
Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Francois R.”

      Changed Status to “Confirmed”

    • Thanks, this is a really interesting issue; we will try to prioritize a fix as soon as we have bandwidth.

    • The only workaround is to put the same redefinition onto the pseudo element of the child so as to work on Edge too. See https://codepen.io/hm100/pen/XYPyay which is a forked working version of your pen in Edge

    • Areti,

      That’s a nice workaround, but unfortunately, that’s not something I can do in my app. For now, we had to change the elements in question to be regular elements (as opposed to pseudo elements), but we’d rather they were pseudo elements since they are for styling only and do not need to appear in the markup.

    • It’s probably too late for a lot of projects since Edge Chromium is about to arrive but I just figured out a work around for this since it was critical for my project.

      Anyone running into this likely has css like this:

      sel::before { border-color: var(--bc); }
      

      and markup like this:

      
        
      
      

      where “sel” is whatever your selector is without the pseudo selector and it’s expected the html will set --bc on each item or may not.

      The bug is that only the first setting of --bc is used.

      The work around is here:

      sel::before { border-color: var(--bc); }
      sel sel { --DONTSHAREVAR-1-bc: var(--bc); }
      sel sel::before { border-color: var(--DONTSHAREVAR-1-bc); }
      sel sel sel { --DONTSHAREVAR-2-bc: var(--bc); }
      sel sel sel::before { border-color: var(--DONTSHAREVAR-2-bc); }
      sel sel sel sel { --DONTSHAREVAR-3-bc: var(--bc); }
      sel sel sel sel::before { border-color: var(--DONTSHAREVAR-3-bc); }
      

      The idea is to copy your var into depth-dependent/depth-unique variables on the containing element and then have equal depth dependent use of of that variable on the pseudo element. This maintains a component-like use of --bc by essentially adding internal variables as copies per-depth.

      Unfortunate that it’s not an infinite depth solution but it still saves the extra html, keeps the component itself clean, aand if your selector can be made short, the css isn’t completely blown out.

      This set back my launch a bit to figure it out, but hopefully the solution helps others because it’s a huge relief for me.

    • I do not understand what you want to tell me … please explain me
      M-C G

    • I do not understand what you want to tell me … please explain me
      M-C G

    • Hey M-C G, here is a copy of the original codepen with the way to avoid it and still use pseudo elements:

      https://jsfiddle.net/gbfcpLex/

    You need to sign in to your Microsoft account to add a comment.

    Sign in