Aspects of modern HTML/CSS you may not be familiar with

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