如何在 :host-context 下嵌套属性选择器？

Question

使用 LESS 预处理器和 shadow-dom 为单个组件提供主题支持。我也尝试过嵌套 :host-context 和 :host 选择器但无济于事。

:host-context(.dark) {
  @import (multiple) 'variables/dark-theme';
  .dropdown;
}

:host-context(.light) {
  @import (multiple) 'variables/light-theme';
  .dropdown;
}

.dropdown() {
  //some component styles here

  &:disabled {
    background-color: @disabled-bg;
    color: @disabled-color;

    .dropDownListSelect {
      cursor: not-allowed;
    }
  }
}

Answer 1

这是我对 Shadow-DOM 不了解的结果，因为它对我来说还是有些陌生。我能够通过使用 &:host 选择器来完成此操作。

:host-context(.dark) {
  @import (multiple) 'variables/dark-theme';
  .dropdown;
}

:host-context(.light) {
  @import (multiple) 'variables/light-theme';
  .dropdown;
}

.dropdown() {
  //some component styles here

  &:host([disabled]) {
    background-color: @disabled-bg;
    color: @disabled-color;

    .dropDownListSelect {
      cursor: not-allowed;
    }
  }
}