//child.componet.html
child span
//child.component.scss
.child-span {
  color: red;
}

//parent.component.scss
app-child {
  ::ng-deep {
    .child-span {
      color: green;
    }
  }
}

//child.componet.html

  child span

a[target] {
    background-color:yellow;
}

[attr] span {
    color: green;
}

//child.componet.html
child span
//child.component.scss
.child-span {
  color: red;
}

//parent.component.html

//parent.component.scss
app-child {
  ::ng-deep {
    .child-span {
      color: green;
    }
  }
}

//child.componet.html

  child span

這時候即使我們發(fā)現(xiàn)child 組件中span 的顏色依舊是紅色。

實際上原因也不復(fù)雜，檢查angular 生成的樣式文件后，我們可以發(fā)現(xiàn)，之所以沒有把覆蓋掉，純粹是因為css 選擇器優(yōu)先級的問題。child 組件生成的樣式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11] 優(yōu)先級高于parent 組件生成的樣式app-child[_nghost-mye-c12] .child。于是，我們看到的效果就是parent 組件中的::ng-deep 沒有生效，一種比較快捷的做法是直接在parent 組件的樣式后面加上!important。但是由于!important 權(quán)重太高的原因，并不是很推薦。歪個樓，在發(fā)現(xiàn)angular ::ng-deep 失效的原因之前，很遺憾，項目之前很多地方的都有這種用法。

另一個方法就是，既然是因為優(yōu)先級不夠，那么提高parent 組件生成的樣式的優(yōu)先級就可以了。 修改parent 組件的代碼為

:host {
  app-child {
    ::ng-deep {
      .child-div {
        .child-span {
          color: green;
        }
      }
    }
  }
}

這時候，parent 組件生成的樣式[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span 優(yōu)先級高于child 組件生成的樣式.child-div[_nghost-mye-c11] .child-span[_nghost-mye-c11] ，child 組件中span 的顏色也就變綠了。

這里我們使用了:host 關(guān)鍵字，接下來，我們簡單看看它的作用。

:host

上個小結(jié)中，parent 組件生成的樣式是[_nghost-mye-c12] app-child[_nghost-mye-c12] .child-div .child-span，如果去掉:host，就會發(fā)現(xiàn)，生成的樣式變成了app-child[_nghost-mye-c12] .child-div .child-span。所以:host 關(guān)鍵字只是給生成的樣式，加上了parent 組件屬性字段而已。

那這個:host有什么用呢？

常見的作用有兩個。

一個就是選擇當前的組件標簽，在angular 中，我們自定義的組件，比如這里的parent 組件app-parent 和child 組件app-child 最后都是會渲染到生成的html 文檔上的。如果需要選中這些標簽，就可以使用:host 關(guān)鍵字。

另一個作用還是隔離樣式，將class 類寫在:host 內(nèi)部，這個類無論如何也是不可能泄漏到全局去的。實際上，通過前面的內(nèi)容分析可以發(fā)現(xiàn)，不寫在:host 里面，也不會泄漏到全局。但是如果出現(xiàn)了以下的情況

//some.component.scss
::ng-deep {
    .random-class {
        xxxx
    }
}

這個類經(jīng)過angular 處理以后，最后會變?yōu)?/p>

.random-class {
    xxxx
}

random-class 將會對全局造成影響。

但是如果把它包裹在:host 內(nèi)部，哪怕使用了::ng-deep 關(guān)鍵字，最多也只會影響到這個組件的后代元素。 所以在angular 官方文檔中有下面的一段話。

Applying the ::ng-deep pseudo-class to any CSS rule completely disables view-encapsulation for that rule. Any style with ::ng-deep applied becomes a global style. In order to scope the specified style to the current component and all its descendants, be sure to include the :host selector before ::ng-deep. If the ::ng-deep combinator is used without the :host pseudo-class selector, the style can bleed into other components.

以上就是“angular如何進行樣式隔離”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。