如何用CSS选择Shadow Root内部元素修改导入组件样式？

Shadow DOM的封装特性会阻止外部CSS直接选中其内部元素，你之前尝试的:host()/:host-context()仅作用于自定义元素本身，无法穿透到内部的.mb-1 div。要修改这个元素的样式，得根据组件的设计情况选择方案：

• 利用CSS自定义属性（推荐）
  如果组件内部的.mb-1样式已使用自定义变量，比如组件Shadow DOM内的样式：

  .mb-1 {
    margin-bottom: var(--mb-1-margin, 0.25rem); /* 可设置默认值 */
  }
  

  你就能在外部通过自定义元素直接赋值这个变量：

  /* 假设自定义元素标签为<my-component> */
  my-component {
    --mb-1-margin: 1rem;
  }
  

• 使用::part选择器（需组件支持）
  若组件内部的.mb-1 div添加了part属性，比如：

  <div class="mb-1" part="mb-element"></div>
  

  外部可通过::part选中该元素并设置样式：

  my-component::part(mb-element) {
    margin-bottom: 1rem;
    /* 其他自定义样式 */
  }
  

• 修改组件内部代码（有权限时）
  如果你能编辑组件源码，直接在Shadow DOM的样式块里编写.mb-1的样式即可：

  /* 组件内部<style>标签中 */
  .mb-1 {
    /* 你需要的样式 */
  }
  

  也可以用:host-context配合外部父类实现条件样式：

  /* 组件内部样式 */
  :host-context(.custom-wrapper) .mb-1 {
    margin-bottom: 1rem;
  }
  

  然后给自定义元素的父容器添加custom-wrapper类：

  <div class="custom-wrapper">
    <my-component></my-component>
  </div>
  

• JS注入样式（应急方案）
  要是以上方法都不可行，还可以通过JS直接操作Shadow Root：

  const component = document.querySelector('my-component');
  // 直接修改元素样式
  component.shadowRoot.querySelector('.mb-1').style.marginBottom = '1rem';
  // 或者注入完整样式表
  const style = document.createElement('style');
  style.textContent = '.mb-1 { margin-bottom: 1rem; }';
  component.shadowRoot.appendChild(style);
  

内容的提问来源于stack exchange，提问作者Ricardo de Vries