I like option 3 the best, but what I'd really prefer would be block-scoped css blocks that could optionally be scoped just to children of the parent tag. I kno

I like option 3 the best, but what I'd really prefer would be block-scoped css blocks that could optionally be scoped just to children of the parent tag. I know this is why we have shadow dom, but in practice I feel like the shadow dom has caused more problems than it solved. Now we have a bunch of ::part things being added to make up for the problems, but it's still very difficult to work with. I'd love to have the ability to put a <style scoped> tag inside a div and have it's rules only apply to the contents of that div, optionally overriding parent styles. I don't know about the challenges implementing that in the engines, but it seems like it would be straightforward since the functionality already exists, style tags are valid markup almost everywhere in the dom, they're just parsed out and combined. For this you'd just have to track the parent element and bind to it like an ID selector. This would make web component authoring more pleasant. Edit: it looks like the functionality I'm asking for has already been considered, partially implemented, and is now deprecated, sadly.