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

【问题标题】：How do I nest attribute selector under :host-context?如何在 :host-context 下嵌套属性选择器？
【发布时间】：2017-12-21 09:40:31
【问题描述】：

使用 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;
    }
  }
}

【问题讨论】：

标签： css css-selectors less shadow-dom

【解决方案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;
    }
  }
}

【讨论】：