你的 CSS 为什么改不动它？Shadow roots 的隔离秘密

你有没有想过，为什么有些网页组件的样式怎么改都影响不到它？Simon Willison 用一组实时示例把 shadow roots 讲透了——这不是什么高深的黑魔法，而是 Web Components 里一种隔离 DOM 的作用域机制。说白了，它给组件建了一座"影子花园"，里面的 CSS 自成体系，外面的样式进不来，里面的也出不去。我觉得这种隔离思路对前端架构很关键：当页面越来越像拼搭积木，组件之间的样式冲突迟早会爆发。文章最大的价值不在于教概念，而在于让人亲手看到效果——比读文档快十倍。

原文：Shadow roots, explained with live examples · 来源：Hacker News