This article has lots of nice stuff in it but ... that first example in the tweet at the top,

    cool-thing {
        display: flex;
        &[shadow] {
            box-shadow: 1px 1px #0007;
        }
        @media (width < 480px) {
            flex-direction: column;
        }
    }

    and html like

    <cool-thing shadow>wow</cool-thing>

I pasted it into a file and it doesn't work. I honestly didn't expect it to work. I thought you needed more to get a cool-thing element but in any case, it's not encouraging to see the first example fail. Am I missing some context?

-- update --

my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies

▲ ZYbCRq22HbJ2y7 6 days ago | parent | next [-]

That is just showing nesting with some older features

- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting...

- https://caniuse.com/css-media-range-syntax

- https://caniuse.com/css-nesting

- https://caniuse.com/flexbox

▲ leoh 6 days ago | parent | prev | next [-]

Seems to work fine https://plnkr.co/edit/Sor4x5BlMwmyRqZw?open=lib%2Fstyle.css&...

▲ rebane2001 6 days ago | parent | prev [-]

it should work, did you put the css between <style> tags?

also the box-shadow is a box shadow, you might wanna change it to text-shadow if that's what you'd expect from it

▲

msie 6 days ago | parent [-]

text-shadow works. Was the use of box shadow a mistake?

	▲	rebane2001 6 days ago \| parent [-]
		that snippet of code was never meant to be used, it was supposed to be illustrative code that fits in a tweet text-shadow does make more sense if you're actually trying out the code, but the original intention was to demonstrate a more complex element having a shadow modifier