Mixed Shadow Mode — Checking & Comparison

好，我们来聊聊原生阴影和合成阴影的区别，这可是开发中容易踩坑的地方。你可以把它想象成两种不同的房间布置方式：合成阴影像开放式厨房，东西容易共享；原生阴影则是独立隔间，各自管各自的。运行时很简单，用`this.template.synthetic`一查，返回`true`就是合成模式，`undefined`就是原生模式。 先说原生独有的一些功能：它支持服务端渲染（可能叫SSR，这里写成了SSSR）、`::part`选择器、表单相关的自定义元素，还有命名插槽。这些在合成里是没有的。 元素渲染上有个明显的差异：原生阴影下，就算你没定义插槽，组件内的所有元素照样哗啦啦全渲染出来；而合成阴影就很“务实”，只渲染那些真正放进插槽里的内容，不用的一概不显示。 最大的坑其实是样式。合成阴影允许你加载全局样式表，比如Salesforce的SLDS，一加载就能让所有组件直接用，很方便。但原生阴影要求每个组件必须导入自己的样式文件，全局的那套不管用了。如果你需要跨组件共享样式，最好用CSS自定义属性（也就是变量），或者把样式值当作属性传进去。 可访问性也受影响。每个组件里的ID都是本地作用域，所以像`aria-labelledby`这种跨组件引用ID的做法就行不通了。解决办法是把被引用的元素放在同一个组件里，或者改用`aria-label`。 还有几个点要留意：原生阴影目前还不支持某些基础组件；像`innerHTML`这类Web API的行为也变了，合成模式会暴露阴影内部的内容，原生模式为了封装，会把这些内容藏得严严实实。 所以迁移原生阴影时，样式、ID引用和API行为都得仔细检查，特别是全局样式的习惯要改掉。明白了吗？