如何将属性选择器嵌套在：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;
    }
  }
}