Shadow DOM 里怎么修改外部传入的 slot 样式？

我之前也碰到过这个问题，确实有点让人抓狂。其实问题出在 ::slotted 的选择器规则上。

简单说就是 ::slotted 只能选择最外层的元素，不能深入到嵌套结构里去。比如你传入一个 到 slot 里，那么 ::slotted(div) 是有效的，但 ::slotted(p) 就没用了，因为 p 不是最外层元素。

如果要修改插槽里的所有 p 标签样式，可以试试这样：

::slotted(*) {

  color: red;

}

或者更直接的办法是给外部元素加个 class，然后用 ::slotted 来匹配这个 class：
.my-slot-content p { color: red; }

当然了，要是你想完全控制样式，也可以考虑在组件内复制一份内容，不过这得用 JavaScript 处理，稍微麻烦点。总的来说 Shadow DOM 的封装性就是这样设计的，有时会带来些小困扰，但也保护了样式不会乱串。

省事的话，直接在 ::slotted(*) 里写样式准没错。记住了，::slotted(p) 只能作用于直接子元素，试试这样：

::slotted(*) p {

  color: red;

}

有时候浏览器兼容也怪，但这个写法稳当得多。