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

::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/

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

Answer 3

At the time of writing you can try ::part and ::theme with Chrome 73 and above:

https://www.chromestatus.com/feature/5763933658939392

<submit-form>
  #shadow-root
  <x-form exportparts="some-input, some-box">
    #shadow-root
    <x-bar exportparts="some-input, some-box">
      #shadow-root
      <x-foo part="some-input, some-box"></x-foo>
    </x-bar>
  </x-form>
</submit-form>

<x-form></x-form>
<x-bar></x-bar>

You can style all the inputs with:

:root::part(some-input) { ... }

There is the full documentation how it works:

https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md

This somehow can solve your problem, but I still miss the days how I styled embedded tweets with ::shadow.

Answer 4

"::v-deep" is working for me. For example:

    .menu {
        // stuff
    }
    /deep/.sub-menu {     // override submenu
        .sub-menu__mini {
                //stuff
            }
            a, a:hover {
                //stuff
            }
        }
    }

becomes:

    .menu {
        // stuff
    }
    ::v-deep .sub-menu {     // override submenu
        .sub-menu__mini {
                //stuff
            }
            a, a:hover {
                //stuff
            }
        }
    }