shadow dom 中的 web 组件样式，取决于其父级

Question

我正在开发一个用于上传文件的组件。我制作了两个 Web 组件（wc）：

• wc-uploader 带有选择文件按钮的父级。
• wc-upload 作为文件添加到wc-uploader 的子代被添加。

如果父级 (wc-uploader) 具有 readonly 或 disabled 属性，我希望以不同的方式设置 wc-upload 项目的样式。

我认为样式应该在与它相关的wc-upload 组件内。

这是我在wc-upload 模板中尝试过的选择器，但它不起作用。我猜它看不到它的影子根。

wc-uploader[readonly] :host #close {  /* here host = wc-uploader */
    opacity: 0.5;
}

如何根据其父元素设置此元素的样式。 例如。就像如果一个选择项被禁用，那么它的 option 孩子也被禁用。

Answer 1

对于松散耦合，所以 何时何地 子 Web 组件附加并不重要：

让孩子们听：

  this.closest("wc-uploader").addEventListener("close",(evt)=>{
    let parent = evt.detail; //evt.target could do
    if parent.hasAttribute("close") ...
    else ...
  });

然后父级报告它的状态：

attributeChangedCallback(name,oldValue,newValue){
  if(name=="close" || name=="readonly" || name=="disabled"){
    this.dispatchEvent(new CustomEvent(name, {
      bubbles: false, // Event stays at wc-uploader
      detail: this // wc-uploader
    }));
  }
}

如果您的孩子在 shadowRoots 中比较深入，您需要：
Custom Element getRootNode.closest() function crossing multiple (parent) shadowDOM boundaries

或者使用document.作为你的“事件总线”，但是你必须小心你的事件名称。

注意addEventListener 在Web 组件范围之外 附加了一个监听器；所以当组件被移除时不会被垃圾回收；你的任务是在disconnectedCallback中删除它们