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

Question

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?

Answer 1

The problem is that ::shadow and /deep/ break encapsulation. I am glad they are gone.

The good 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/

Answer 2

As of Polymer 2:

• ::shadow (shadow-piercing selectors) - there is no direct substitute. Instead a custom CSS properties has to be used. Polymer 2: Custom CSS Properties

• /deep/ - there is some sort of replacement by defining :host > * { ... } (applies a ruleset to all of the top-level children in the host's shadow tree, which doesn't conflict with the rule in the main document).

For more detailed information check Polymer 2 Upgrade Notes