Scoped CSS Code Golf: The following is a "one-line" snippet I have created to enable scoped style tags. It supports, :global, media queries, keyframes, and adding and removing style tags/the scoped attribute. It's pretty hacky, and there may be some unexpected edge cases with the regexes, but it works for me! I mostly created it for fun, and as …

scopedcss.js

window.addEventListener('DOMContentLoaded',(a,d=document,s='STYLE',p=(d.head.innerHTML+=`<${s} id='g'></${s}>`,'scoped'),f=(e,x,y,i=e?.dataset?.s??new Date%1000,b=((e.dataset.s=i,a='attributes',x='textContent'),e[a][p]))=>{(e?.parentElement??(i='html'))?.classList?.[b?'add':'remove'](i);e[x]=e?.[x]?.replace(/(?<=^([ \t]*):global\s?{\n?)[\S\s]*?(?=^\1})|(?<s>.s-\d+\s)/gm,(...m)=>(!m?.[5]?.s&&(g[x]+=m[0]),''))?.replace(/^(?<i>[ \t]*)(?![@:]|(?:to|from|\d+%))(?<s>(?:\S|(?<=\S)\s(?!{))*)(?=\s?{$)/gm,`$<i>${b?`.${i} `:''}$<s>`)},m=new MutationObserver(l=>l.map(r=>[...r?.addedNodes,r.target].map(n=>n?.tagName==s&&f(n)))).observe(d.documentElement,{[a]:1,childList:1,subtree:1,attributeFilter:[p]}))=>d.querySelectorAll(s+`[${p}]`).forEach(f))

Version 1:

  document.querySelectorAll('style[scoped]').forEach(el => {
    const id = 's-' + ~~(Math.random() * 1000000)
    el.parentElement.classList.add(id)
    el.textContent = el.textContent.replace(/(?<!@.*)(?:[^\s])(?<!(?<g>:.*))[\w:\(\)]+(?=\s?{)/g, `.${id} $&`)
  }) 

Example of functionality:

<div>
    This text is not blue
    <div>
        This text is blue.
        <!-- Because of the "scoped" attribute, the following styles only apply to the parent element and it's children. -->
        <style scoped>
            div {
                color: blue;
            }
        </style>
    </div>
</div>

Example of :global escape-hatch functionality:

<div>
    This text is red.
    <div>
        This text is also red.
        <style scoped>
            /* All styles defined within this block apply globally, and are not scoped */
            :global {            
                div {
                    color: red;
                }
            }
        </style>
    </div>
</div>