Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What's the substitute for ::shadow and /deep/?

The two shadow-piercing combinators have been deprecated as stated in https://www.chromestatus.com/features/6750456638341120
Then what's the substitude for achieving the same thing, or this shadow-piercing feature has been completely abandoned?

like image 336
Zhengquan Bai Avatar asked Mar 02 '16 08:03

Zhengquan Bai


People also ask

Is Deep deprecated?

Both APIs ::ng-deep and /deep/ are deprecated and will eventually be removed in the future.

What is deep CSS?

In order to do this, you add /deep/ to the CSS selector. So in the example shown, html /deep/ [self-end] is selecting all elements under the html (top level) element that have the self-end attribute, including those buried inside web components' shadow DOMs roots.


1 Answers

::shadow and /deep/ were removed for breaking encapsulation.

The substitutes are:

  • CSS variables. It already works natively with the recently launched Google Chrome 49. Read here:
    1. http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
    2. https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
    3. http://blog.chromium.org/2016/02/chrome-49-beta-css-custom-properties.html
  • :host-context. Read here: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
like image 54
MarcG Avatar answered Oct 19 '22 07:10

MarcG