shadow dom内web component如何根据父组件属性设置对应样式

你的原有写法存在两个核心问题：

1. :host 在 wc-upload 的Shadow DOM样式中，指代的是wc-upload元素本身，而非你认为的父组件wc-uploader
2. Shadow DOM的样式隔离特性确实不允许子组件内部样式直接选择父级DOM树的元素，因此原有选择器逻辑无法生效。

以下是两种可落地的实现方案：

方案1：使用:host-context()伪类（推荐，符合样式内聚需求） #

:host-context()是专门用于匹配宿主元素所处上层上下文状态的CSS伪类，样式完全写在wc-upload组件内部即可，无需修改父组件逻辑：

/* 写在 wc-upload 的 Shadow DOM 样式中 */
:host-context(wc-uploader[readonly]) #close,
:host-context(wc-uploader[disabled]) #close {
    opacity: 0.5;
    pointer-events: none; /* 可额外添加禁止点击逻辑，匹配禁用状态 */
}

目前除了极旧版本浏览器，主流Chrome、Firefox、Safari都已支持该特性。

方案2：父组件属性同步到子组件（兼容性最优） #

如果需要兼容低版本浏览器，可以采用属性同步的方案，逻辑更可控：

1. 首先在wc-uploader中监听readonly、disabled属性变化，同步给所有子wc-upload设置同名属性，动态新增子组件时也要做一次属性同步：

// wc-uploader 组件逻辑
static get observedAttributes() {
  return ['readonly', 'disabled'];
}

attributeChangedCallback(name, oldValue, newValue) {
  const hasAttr = newValue !== null;
  this.querySelectorAll('wc-upload').forEach(item => {
    hasAttr ? item.setAttribute(name, '') : item.removeAttribute(name);
  });
}

// 新增wc-upload子项的方法示例
appendUploadItem() {
  const item = document.createElement('wc-upload');
  // 同步父组件当前的状态属性
  if (this.hasAttribute('readonly')) item.setAttribute('readonly', '');
  if (this.hasAttribute('disabled')) item.setAttribute('disabled', '');
  this.appendChild(item);
}

2. 之后在wc-upload的内部样式中，直接根据自身属性写样式规则即可：

/* 写在 wc-upload 的 Shadow DOM 样式中 */
:host([readonly]) #close,
:host([disabled]) #close {
    opacity: 0.5;
    pointer-events: none;
}

内容的提问来源于stack exchange，提问作者run_the_race