Web Component内部伪元素无法被外部CSS直接修改，因Shadow DOM封装机制默认阻止样式穿透；唯一可控方式是组件主动暴露CSS part、自定义属性或:host-context()接口。
Web Component内部伪元素无法被外部CSS直接修改
Shadow DOM的封装机制默认阻止外部样式穿透到内部，::before、::after、::placeholder 等伪元素在 open 或 closed shadow root 中都不可被宿主页面的CSS选中——哪怕用了 !important 也没用。
这不是浏览器bug，是规范行为。常见错误现象包括：写了一堆 my-component ::before { content: "x" } 却完全没生效；或误以为 /deep/、::ng-deep（Angular）能穿透现代标准 Shadow DOM，其实它们早已被弃用且对原生 Web Component 无效。
- 只有组件自己在 shadow root 内部定义的样式（
<style></style>或adoptedStyleSheets）才能控制其内部伪元素 - 若组件暴露了
:host或自定义 CSS part（如part="input"），你只能影响容器或可插槽节点，不能直接改其子元素的::placeholder - Chrome/Firefox/Safari 对
shadow-root内伪元素的支持一致，不存在兼容性差异，问题只出在作用域隔离逻辑上
用 :host-context() + 自定义属性间接触发内部伪元素变化
如果组件作者预留了响应式接口（比如监听 data-* 属性或 CSS 自定义属性），你可以通过外部设置来“驱动”内部样式变更。例如，一个封装了 <input> 的组件支持 --input-placeholder-color，那它内部的 input::placeholder 就能读取该变量。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先检查组件文档或源码，确认是否暴露了可被
:host-context()感知的上下文（如data-focus="true"）或 CSS 自定义属性 - 在宿主页面设置该属性：
<my-input data-show-placeholder="true"></my-input>，然后组件内用:host-context([data-show-placeholder]) input::placeholder { opacity: 1; } - 避免滥用
:host-context()嵌套过深，它只匹配宿主元素自身是否满足条件，不递归查找祖先
通过 slots + CSS parts 显式开放部分伪元素控制权
真正可控的方式，是组件设计时主动用 part 属性标记可样式化节点，并在内部为这些节点的伪元素提供样式入口。比如 <input part="field">，你就能写 my-component::part(field)::placeholder { color: red; } ——但前提是浏览器支持且组件确实加了 part。
当前支持情况：
-
::part()在 Chrome 99+、Firefox 115+、Safari 17.4+ 可用，旧版 Safari 需要-webkit-appearance: none配合 hack -
::part(x)::before是合法语法，但::part(x)::placeholder要求目标元素本身支持该伪元素（比如input支持，div不支持） - 别试图用
::part(x) > span::before，::part只作用于带part属性的那个元素本身，不代理后代
绕不开封装时，只能改组件源码或用 JS 动态注入样式
当组件既没暴露 part，也不响应自定义属性，且你有权限修改它时，最稳妥的做法是在其 shadow root 内部插入 <style></style>。没有权限？那就只能用 shadowRoot.querySelector('input').setAttribute('placeholder', '...') 这类运行时补救，或者监听 slotchange 后 patch 样式表。
注意几个坑：
-
shadowRoot.mode === 'closed'时，JS 无法访问内部节点，此时任何外部干预都失效 - 动态插入
<style></style>要确保时机：必须在connectedCallback之后、且 shadow root 已 attach 完成 - 不要在每次渲染都重复 append
<style></style>，先查重，否则会堆积多份相同规则
!important 上浪费时间。 
