CSS 属性 'cursor' 无法使用 :host 选择器

Question

我正在尝试弄清楚如何在使用 :host[= 时应用 属性 cursor 29=]选择器。

其他属性已正确应用，但未正确应用 cursor。

:host([disabled]) {
    color: #626878;
    background-color: #C0C4CB;  
    cursor: not-allowed!important;  
}

:host 指的是使用 LitElement 制作的 web 组件。

感谢您的帮助

Answer 1

运行良好：

  customElements.define("my-element", class extends HTMLElement {
    connectedCallback() { // so attributes can be queried
      this
        .attachShadow({mode:"open"})
        .innerHTML = `<style>
                         :host {
                           display:    inline-block;
                         }
                         :host([disabled]) {
                           cursor:     not-allowed !important;
                           background: pink        !important;
                           color:      grey        !important;
                         }
                     </style>
                     <h1>&lt;my-element 
                         ${this.hasAttribute("disabled")?"disabled":""}></h1>`;
    }
  })

<style>
  my-element{
    cursor:     pointer;
    background: lightgreen;
    color:      green;
  }
</style>

<my-element></my-element>
<my-element disabled></my-element>

需要!important

来自https://web.dev/shadowdom-v1/

One gotcha with :host is that rules in the parent page have higher specificity than :host rules defined in the element. That is, outside styles win. This allows users to override your top-level styling from the outside. Also, :host only works in the context of a shadow root, so you can't use it outside of shadow DOM.