如何覆盖：host 中的样式？答案

【问题标题】：How to override styling in :host?如何覆盖：host 中的样式？
【发布时间】：2022-01-08 14:28:10
【问题描述】：

对于特定的媒体查询，我想覆盖 ion-content 的样式。我正在使用具有高特异性的 ID 进行操作：

@media (min-width: 992px) {
    #content {
        width: 50rem;
        margin: 0 auto !important;
    }
}

正如您在以下屏幕截图中所见（以黄色突出显示），之前在 :host 中的 margin 样式没有被覆盖。一旦我删除 !important ，我的 css 规则就会被应用。

如何完全覆盖 :host 样式？

【问题讨论】：

你不能这就是shadow dom未被充分利用的主要原因。使用包装元素并将边距设置为该元素

标签： css ionic-framework shadow-dom

【解决方案1】：

不是，

:host{ background:green!important } 胜过可继承 样式和内联样式

<style>
  custom-element {
    font: 18px Arial;display:block;color: white;
    background: purple;
  }
  custom-element.inheritable_important {
    background: blue !important;
  }
  custom-element:before {content:" purple ";}
  custom-element.inheritable_important:before {content:" blue!important  ";}
</style>
<custom-element important=""></custom-element>
<custom-element important="!important"></custom-element>
<custom-element important="" style="background:red"></custom-element>
<custom-element important="!important" style="background:red"></custom-element>
<br>
<custom-element class="inheritable_important" important=""></custom-element>
<custom-element class="inheritable_important" important="!important"></custom-element>
<custom-element class="inheritable_important" important="" style="background:red"></custom-element>
<custom-element class="inheritable_important" important="!important" style="background:red"></custom-element>

<script>
  customElements.define("custom-element", class extends HTMLElement {
    connectedCallback() {
      this.attachShadow({mode:'open'}).innerHTML = `<style>
      :host{background:green${this.getAttribute("important")}}
      </style>style="${this.getAttribute("style")||""}"  host:green${this.getAttribute("important")} `;
    }
  })
</script>

【讨论】：